Rails 3 - Checkbox dependant of radio button selection

Question

I need a solution to hide/show a checkbox depending a radio button selection. I tried different solution found here and there but I can make them work.

CONTEXT: I have a pool of contact persons that can be associated to a business. A user can select multiple contact persons but MUST select a primary contact person. So I have a radio button group whit all the contact persons to select the primary contact, and I have a checkbox group with again all the contact persons to select the "other" contacts.

NEED: Now, what I like to do is that when the user select the primary contact in the radio button group, this contact will be removed from the "other contact" checkbox group, so the user cannot select the same contact twice. I can use JQuery as well as plain JavaScript.

CONSTRAINT: The radio button group, as well as the checkbox group, are dynamically created using Rails Tag helper. So it's kind of tricky for the ids and name of the elements. Also, there is a has_many :trough between business and contact.

So for the radio button, I have:

<% @contacts.each do |contact| %>
<li><%= radio_button_tag 'primary_contact', contact.id, @primary_contact == contact, :class => 'radio'%>&nbsp;&nbsp;<%= contact.name %>,&nbsp;<%= contact.contact_type.name %></li>
<% end %>

And for the checkbox group, I have:

<%= hidden_field_tag 'business[contact_ids][]', "" %>
<% @contacts.each do |contact| %>
<li><%= check_box_tag 'business[contact_ids][]', contact.id, @business.contacts.include?(contact), :class => 'radio' %>&nbsp;&nbsp;<%= contact.name %>,&nbsp;<%= contact.contact_type.name %></li>
<% end %>

Any suggestion about other design (using radio buttons and checkboxes...) to achieve my goal are very welcome.

Thanks Alain

Sully · Accepted Answer · 2012-09-27 17:28:48Z

1

<li><%= radio_button_tag ... :id => "#{contact.id}", :onclick => 'removeFromOtherList(this.id);' %><%= "  #{contact.name}, #{contact.contact_type.name}" %></li>

This way you have the contact ids for the HTML tag id. Onclick it will remove\disable the other contact

Do the same for the other contacts

...<%= check_box_tag ... :class => 'radio', :id => "otherContact#{contact.id}" %> ...

Then we can remvoe the correct contact from the other list

function removeFromOtherList(contactId) {
   $("#otherContact"+contactId).parent().remove(); //to remove the LI
}

Demo

Edit:

One way to do it is use show/hide and keep track of the last selected radio

var lastSelectedRadioId = null;
function removeFromOtherList(contactId) {
  $("#otherContact"+contactId).parent().hide();
  if(lastSelectedRadioId ){
     $("#otherContact"+lastSelectedRadioId ).parent().show();       
  }
  lastSelectedRadioId = contactId;
}

Demo

edited Sep 27, 2012 at 17:28

answered Sep 27, 2012 at 16:27

Sully

15k5 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alain Over a year ago

Thanks @D3mon, it works. But then I'm having another problem if I remove the element. If my user check a radio button, the corresponding checkbox disappears, but if he then select another radio button, the checkbox that was removed is not reappearing in the list!

Alain Over a year ago

Fantastic! +1 for your quick response to my comment. Thank you very very much.

Collectives™ on Stack Overflow

Rails 3 - Checkbox dependant of radio button selection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related