如何禁用行以及列复选框，除了使用jQuery的表中点击的一个
问题描述：
我试着用下面的代码。我已经完成了禁用行中的复选框。现在我有一个问题，禁用各自的专栏。如何禁用行以及列复选框，除了使用jQuery的表中点击的一个
在下面的代码片段中找到我的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>注：我使用<script src="jquery-1.7.1.min.js"></script>
答
您可以使用.index()来获取被点击的单元格的列索引
。如果没有参数传递给.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，但需要一个选项勾去掉，所以改复选框）
答
$('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;
});
答
你可以这样做：
$('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);
});
本地测试并按预期工作。将更新小提琴。
更新：这里是小提琴https://jsfiddle.net/sq3vrxy1/
答
对于列，你需要得到列索引。
所以......类似的东西
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);
由于这是一个字体端的问题，你可以考虑做一个片段与您的代码？ （用PHP替换PHP部分） –
嗨Pierre我已经用HTML代替了PHP代码 – Vetrivel
HTML代码包含单选按钮。而你的JavaScript包含'input [type = checkbox]'...奇怪！ –