jqueryを使用してテーブル内のクリックされたもの以外の行と列のチェックボックスを無効にする方法

Question

次のコードを試しました。私は行内のチェックボックスを無効にしました。今私はそれぞれの列を無効にする問題があります。

以下のスニペットで自分のHTMLとJSコードを見つけてください。

コードは

$('input[type=checkbox]').click(function() { 
 
    $(this).closest('tr') 
 
    .find('input[type=checkbox]').not(this) 
 
    .prop('disabled', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<table class="reg_table"> 
 
\t \t <tr> 
 
\t \t \t <th></th> 
 
\t \t \t <th>8-9</th> 
 
\t \t \t <th>9-10</th> 
 
\t \t \t <th>10-11</th> 
 
\t \t \t <th>11-12</th> 
 
\t \t \t <th>12-13</th> 
 
\t \t \t <th>13-14</th> 
 
\t \t \t <th>14-15</th> 
 
\t \t \t <th>15-16</th> 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 

 
\t \t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 1</td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="1" class="sss" name="Company name 1" value="Company name 1~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 2</td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="2" class="sss" name="Company name 2" value="Company name 2~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 3</td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="3" class="sss" name="Company name 3" value="Company name 3~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t \t \t 
 
\t \t <tr> 
 
\t \t \t <td>Company name 4</td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~8-9" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~9-10" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~10-11" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~11-12" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~12-13" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~13-14" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~14-15" /></td> 
 
\t \t \t <td><input type="checkbox" alt="4" class="sss" name="Company name 4" value="Company name 4~15-16" /></td> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t </tr> 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t </table>

注意をスニペット：私はあなたがクリックされていますセルの列インデックスを取得するために.index()を使用することができます

Answer 1

<script src="jquery-1.7.1.min.js"></script>を使用しています

。

引数が渡されない場合は、 .index（）メソッドの場合、戻り値はjQueryオブジェクト内の兄弟要素を基準にした最初の要素の位置を示す整数です。

その後、あなたはその列のすべてのセルを見つけるために:nth-childを使用することができます。

の作業フィドル：https://jsfiddle.net/k8u35ysz/

$('input[type=checkbox]').click(function(){ 
     var td = $(this).closest('td'); 
     var tr = $(this).closest('tr'); 
     var tbl = $(this).closest('table') 

     var idx = td.index(); 

     tbl 
      .find("tr td:nth-child(" + (idx+1) + ")") 
      .find("input") 
      .not(this) 
      .prop('disabled', this.checked); 

     tr 
      .find('input[type=checkbox]') 
      .not(this) 
      .prop('disabled', this.checked); 

（質問者のコードがradioを使用しますが外しますするオプションが必要なので、変更チェックボックスに）

Answer 2

$('input[type=checkbox]').click(function() { 
    //This will disable all the checkboxes in a table. 
    $('.reg_table input[type=checkbox]').attr('disabled', true); 

    //This will enable the selected checkbox and set it to selected. 
    $(this).attr('disabled', false); 
    this.checked = true; 
}); 

Answer 3

このようにすることができます：

$('input[type=checkbox]').click(function(){ 
    $(this).closest('tr') 
    .find('input[type=checkbox]').not(this) 
    .attr('disabled', this.checked); 


    // Below is the added code 
    var tdIndex = $(this).closest('td').index() + 1; 
    $('table').find("tr td:nth-of-type(" + tdIndex + ")") 
    .find('input[type=checkbox]').not(this) 
    .attr('disabled', this.checked); 

}); 

期待通りにテストされています。フィドルのために更新されます。

UPDATE：ここフィドルhttps://jsfiddle.net/sq3vrxy1/

Answer 4

が列の場合では、列のインデックスを取得する必要があります。

そう...その

var cell = $(this).closest('td'); 
var index = $(this).closest('tr'); 
var table = $(this).closest('table'); 
$(table).find('tr td:nth-child(' + index + ') input[type=checkbox]').not(this).prop('disabled', this.checked);