javascript - 如何使用 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">
		<tr>
			<th></th>
			<th>8-9</th>
			<th>9-10</th>
			<th>10-11</th>
			<th>11-12</th>
			<th>12-13</th>
			<th>13-14</th>
			<th>14-15</th>
			<th>15-16</th>
			
			
		</tr>

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

注意:我正在使用<script src="jquery-1.7.1.min.js"></script>

Answer 1

你可以这样做:

$('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);

});

已在本地测试并按预期工作。将更新 fiddle 。

更新:这是 fiddle https://jsfiddle.net/sq3vrxy1/