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

Answer 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