0

ラジオボタンの選択に応じてチェックボックスを非表示/表示するソリューションが必要です。あちこちで見つかった別のソリューションを試しましたが、それらを機能させることができます。

コンテキスト: ビジネスに関連付けることができる連絡担当者のプールがあります。ユーザーは複数の担当者を選択できますが、主要な担当者を選択する必要があります。したがって、すべての連絡担当者が一次連絡先を選択するためのラジオボタングループがあり、すべての連絡担当者が「その他」の連絡先を選択するためのチェックボックスグループがあります。

必要: ここで、ユーザーがラジオ ボタン グループの主要な連絡先を選択すると、この連絡先が「その他の連絡先」チェックボックス グループから削除されるため、ユーザーは同じ連絡先を 2 回選択できなくなります。プレーンな JavaScript だけでなく、JQuery も使用できます。

CONSTRAINT: ラジオ ボタン グループとチェックボックス グループは、Rails タグ ヘルパーを使用して動的に作成されます。そのため、要素の 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 を取得します。クリックすると、他の連絡先が削除/無効になります

他の連絡先についても同じことを行います

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

次に、他のリストから正しい連絡先を削除できます

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

デモ

編集：

それを行う1つの方法は、表示/非表示を使用して、最後に選択したラジオを追跡することです

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

デモ

于 2012-09-27T16:27:36.883 に答える