0

我需要一个解决方案来隐藏/显示取决于单选按钮选择的复选框。我尝试了在这里和那里找到的不同解决方案，但我可以让它们工作。

背景：我有一个可以与企业相关联的联系人池。用户可以选择多个联系人，但必须选择一个主要联系人。所以我有一个单选按钮组，所有联系人选择主要联系人，我有一个复选框组，所有联系人再次选择“其他”联系人。

需要：现在，我喜欢做的是，当用户在单选按钮组中选择主要联系人时，该联系人将从“其他联系人”复选框组中删除，因此用户不能两次选择同一个联系人。我可以使用 JQuery 以及纯 JavaScript。

约束：单选按钮组和复选框组是使用 Rails Tag 助手动态创建的。所以元素的 id 和名称有点棘手。此外，在业务和联系人之间有一个 has_many :trough。

所以对于单选按钮，我有：

<% @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 %>

对于复选框组，我有：

<%= 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 %>

非常欢迎任何关于其他设计（使用单选按钮和复选框......）以实现我的目标的建议。

谢谢阿兰

4

1 回答 1

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

这样，您就有了 HTML 标记 ID 的联系人 ID。Onclick 它将删除\禁用其他联系人

对其他联系人执行相同操作

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

然后我们可以从另一个列表中删除正确的联系人

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

演示

编辑：

一种方法是使用显示/隐藏并跟踪最后选择的收音机

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

演示

于 2012-09-27T16:27:36.883 回答