Question

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

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

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

约束：单选按钮组以及复选框组是使用Rails Tag帮助程序动态创建的。因此，对于元素的ID和名称来说，这有点棘手。此外，在业务和联系之间存在一个has_many：低谷。

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

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

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

由于阿兰

Answer 1

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

这样您就可以获得HTML标记ID的联系ID。点击它会删除\禁用其他联系人

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

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

然后我们可以从其他列表中删除正确的联系

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

Demo

修改

一种方法是使用show / hide并跟踪最后选择的无线电

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

Demo

Rails 3 - 复选框取决于单选按钮的选择

1 个答案: