jquery uiを使用した複数のラジオボックス間の関係（有効/無効）

Question

いくつかのチェックボックスの間に、次のような関係を作成しようとしています： 行で番号を選択すると、他の3つの行に

は誰でも修正し、プラザ:)

おかげで、それを簡素化するために私を助けることができる

選択のためのコードはうまく動作しますが、リセットされ、いくつかの選択/選択解除した後、それが正常に動作しない、一見 ...あらかじめ ！

<div> 
    <div id="choixx"> 
    <div id="choix1" class="ui-buttonset choix"> 
     <input type="radio" id="chk4_choice1" name="grp1" onclick="checkColumn(this);" ><label for="chk4_choice1">4</label> 
     <input type="radio" id="chk3_choice1" name="grp1" onclick="checkColumn(this);"> <label for="chk3_choice1">3</label> 
     <input type="radio" id="chk2_choice1" name="grp1" onclick="checkColumn(this);"> <label for="chk2_choice1">2</label> 
     <input type="radio" id="chk1_choice1" name="grp1" onclick="checkColumn(this);"><label for="chk1_choice1">1</label> 
    </div> 
    <div id="choix2" class="ui-buttonset choix"> 
     <input type="radio" id="chk4_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk4_choice2">4</label> 
     <input type="radio" id="chk3_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk3_choice2">3</label> 
     <input type="radio" id="chk2_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk2_choice2">2</label> 
     <input type="radio" id="chk1_choice2" name="grp2" onclick="checkColumn(this);"><label for="chk1_choice2">1</label> 
    </div> 
    <div id="choix3" class="ui-buttonset choix"> 
     <input type="radio" id="chk4_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk4_choice3">4</label> 
     <input type="radio" id="chk3_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk3_choice3">3</label> 
     <input type="radio" id="chk2_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk2_choice3">2</label> 
     <input type="radio" id="chk1_choice3" name="grp3" onclick="checkColumn(this);"><label for="chk1_choice3">1</label> 
    </div> 
    <div id="choix4" class="ui-buttonset choix"> 
     <input type="radio" id="chk4_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk4_choice4">4</label> 
     <input type="radio" id="chk3_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk3_choice4">3</label> 
     <input type="radio" id="chk2_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk2_choice4">2</label> 
     <input type="radio" id="chk1_choice4" name="grp4" onclick="checkColumn(this);"><label for="chk1_choice4">1</label> 
    </div> 
</div> 
<input type="reset" onclick="resetAll();" value="Start Over"> 

<script> 
    $(function() { 
     $("#choixx").buttonset(); 

    }); 
     var disabled_cols = [0,0,0,0]; 
     function checkColumn(elem) { 
     cur_col_id = parseInt(elem.id.slice(3,4)); 
     cur_line_id = parseInt(elem.id.slice(11,12)); 
     console.log("col=" + cur_col_id + " line=" + cur_line_id); 
     var prev_col_id = disabled_cols[cur_line_id-1]; 
    // reactiver les colonnes precedemment désactivées si necessaire 
     if (prev_col_id != 0) { 
      for (var line=1; line<5; line++){ 
      var elem_id = "#chk" + prev_col_id + "_choice" + line; 
      console.log("enable elem_id :" + elem_id); 
      if (line != cur_line_id) { 
       $(elem_id).button("option", "disabled", false); 
       $(elem_id).next('label').removeAttr("aria-pressed");  
      } 
      } 
     } 
     // desactivation d'une nouvelle colonne 
     for (var line=1; line<5; line++){ 
      var elem_id = "#chk" + cur_col_id + "_choice" + line; 
      // console.log("disable elem_id :" + elem_id); 
      if (line != cur_line_id) { 
      $(elem_id).button("option", "disabled", true); 
      $(elem_id).next('label').removeAttr("aria-pressed"); 
      } 
     } 
     disabled_cols[cur_line_id-1] = cur_col_id; 
     } 

    // reinitialliser toutes les radiobox 
     function resetAll() { 
     for (var col=1; col<5; col++){ 
      for (var line=1; line<5; line++){ 
     //console.log("col=" + col); 
      var elem_id = "#chk" + col + "_choice" + line; 
    // console.log("elem_id" + elem_id); 
    $(elem_id).button("option", "disabled", false); 
     $(elem_id).next('label').removeAttr("aria-pressed"); 
    $(elem_id).next('label').removeClass("ui-state-active"); 
      } 
     } 
     } 
    </script> 

Answer 1

どのように我々ははるかに少ないJavaScriptでそれを行うについて：jsFiddle

$("#choixx").buttonset(); 
$('#4by4 input[type=radio]').change(function(){ 
    $('input').button("enable"); 
    $('input:checked').each(function(i,el){ 
     var $target = $(el); 
     var column = parseInt($target.attr('id').charAt(3), 10); 
     $('.button' + column).not($target).button("disable"); 
    }); 
}); 
$("#4by4").bind("reset", function() { 
    $(this).find('input').button("enable"); 
}); 

私はターゲッティングを容易にするためのボタンのそれぞれにクラスを追加しましたが、我々は必要な場合にせずにそれを行うことができます。また、すべての入力を<form>にラップして、「リセット」イベントを適切にキャプチャできるようにしました。

Answer 2

あなたがあなたのリセット機能を変更する場合：

function resetAll() { 
    $('input:radio').button("option", "disabled", false).removeProp('checked'); 
    $('input:radio').next('label').removeAttr("aria-pressed"); 
} 

それはあなたのリセットのために適切な結果を与える必要があります。