動的に作成されたテーブルで動作しないチェックボックスを変更する機能

Question

各行に3つのチェックボックスがあるテーブルがありますが、これは行ごとに1つのチェックボックスしか選択できません。チェックボックスをオンにすると、他のチェックボックスはオフになります。

$('#idCheckboxOne').on 'change', -> 
    if $('#idCheckboxOne').prop('checked') 
    $('#idCheckboxTwo').prop 'checked', false 
    $('#idCheckboxThree').prop 'checked', false 

$('#idCheckboxTwo').on 'change', -> 
    if $('#idCheckboxTwo').prop('checked') 
    $('#idCheckboxOne').prop 'checked', false 
    $('#idCheckboxThree').prop 'checked', false 

$('#idCheckboxThree').on 'change', -> 
    if $('#idCheckboxThree').prop('checked') 
    $('#idCheckboxTwo').prop 'checked', false 
    $('#idCheckboxOne').prop 'checked', false 

ので、このコードが最初に私のテーブルの行ではなく、他の行で動作します：私は現在持っているコードは次のようです。私は自分の問題の一部は、チェックボックスのIDで関数を使用していることを知っているので、各テーブル行は同じチェックボックスを持つため、IDは他のテーブル行に対して一意ではありません。だから私の質問は、各テーブルの行に対して上記の機能を持つための最高のapproadは何ですか？

Answer 1

二つのアプローチ：

1. 使用し、ラジオボタンの代わりに、チェックボックス。同じ名前のラジオボタンのうち1つだけを選択できます。

2. あなたの代わりにラジオボタンのチェックボックスを使用したい何らかの理由で、あなたの代わりにIDのクラスを使用することができる場合：

   $('.classCheckboxOne').on 'change', -> 
       if $('.classCheckboxOne').prop('checked') 
       $('.classCheckboxTwo').prop('checked', false) 
       $('.classCheckboxThree').prop('checked', false) 
   

Answer 2

これはあなたの任意チェックボックスをための汎用的なソリューションを提供します.group-checksクラスをオンにします。これはまた、親に依存しないので、行内にある可能性があります。div - チェックボックスが同じコンテナにある限り重要ではありません。ここで

// attach handler to all checkboxes  
$('input:checkbox.grouped-checks').change(function(event) { 
    // get the container of the checkbox clicked 
    var $parent = $(this).parent(); 
    // unchecked all inputs in the container 
    $parent.children('input[type="checkbox"]').prop('checked', false); 
    // check the one you clicked on 
    $(this).prop('checked', true); 
}); 

はcodepenです：