Question

如果我选中其中一个左侧复选框，我希望启用旁边的复选框。如果我取消选中其中一个左侧复选框，则应再次禁用其旁边的复选框：

$('input[type="checkbox"]').change(function () {
   $("input:checkbox:checked:not(.delivery)").each(function () {
      if ($("input:checkbox:checked").length > 0) {
        $(this).closest("tr").children('.disable').removeAttr("disabled");
      } else {
         $(this).closest("tr").children('.disable').addAttr("disabled");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
   <td><input  type="checkbox"></td>
   <td><input class="disable" disabled="" type="checkbox"></td>
</tr>
<br>
<tr>
  <td><input  type="checkbox"></td>
  <td><input class="disable" disabled="" type="checkbox"></td>
</tr>

使用我的代码，它会被禁用。

Answer 1

如果您可以给第一个复选框和第二个复选框分隔类，即：

，则会更容易

<tr>
    <td><input class="checkbox-parent" type="checkbox"></td>
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td>
</tr>

然后，在这种情况下，我们可以简单地将事件侦听器绑定到第一个复选框.checkbox-parent。检查时，我们通过遍历DOM来禁用其关联的子项。这是通过找到最近的<tr>元素，然后选择.checkbox-child来完成的。要启用/禁用复选框，只需使用.prop('disabled', <boolean>)。

$('.checkbox-parent').change(function() {
  // Traverse the DOM to get associated child checkbox
  var $child = $(this).closest('tr').find('.checkbox-child');

  // Update child state based on checked status
  // - set disabled to false when is checked
  // - set disabled to true when is unchecked
  $child.prop('disabled', !this.checked);
});

您应该不使用.removeAttr()甚至使用.attr()来操纵布尔属性，例如checked，selected，{{1 }，multiple等等。

如果您无法更改标记......

或者，如果您的标记无法更改，则可以选择第一个（使用.first()或.eq(0)）和第二个/最后一个复选框（使用disabled作为第二个，{{3}表格行中的最后一个。

请注意，这不是最佳解决方案，因为更改标记意味着您必须修改这些硬编码的魔术常量和逻辑。

.eq(1)

您的标记存在一些问题需要解决：

您必须将// Bind change event to the FIRST checkbox $('tr input[type="checkbox"]').first().change(function() { // Get the SECOND checkbox var $child = $(this).closest('tr').find('input[type="checkbox"]').eq(1); // If you want to get the LAST checkbox, use: // var $child = $(this).closest('tr').find('input[type="checkbox"]').last(); // Update child state based on checked status // - set disabled to false when is checked // - set disabled to true when is unchecked $child.prop('disabled', !this.checked); });包装在<tr>元素中，否则浏览器只会从标记中取出所有表格元素，以使其在语义上正确
<table>不是<br />

请在此处查看更新的代码：

＆＃13;

<table>

＆＃13;

$('.checkbox-parent').change(function() {
  // Traverse the DOM to get associated child checkbox
  var $child = $(this).closest('tr').find('.checkbox-child');
  
  // Update child state based on checked status
  $child.prop('disabled', !this.checked);
});

＆＃13;

Answer 2

另一个解决方案（使用现有标记），我们可以将change事件附加到已准备好DOM的复选框上。

在更改活动时，获取该行中所有checkboxes的列表，排除所点击的当前checkbox，然后根据当前复选框选项更改另一个复选框的disabled属性

＆＃13;

$(function () {
	$('input[type="checkbox"]:enabled').change(function () {
		$(this).closest("tr").find("input:checkbox").not(this).attr('disabled',!this.checked)
	});
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
	<tr>
		<td><input type="checkbox"></td>
		<td><input class="disable" disabled="" type="checkbox"></td>
	</tr>
	<br>
	<tr>
		<td><input type="checkbox"></td>
		<td><input class="disable" disabled="" type="checkbox"></td>
	</tr>
</table>

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/b5bdjndf/

＆＃13;

$('input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked')){
  	$(this).closest('td').next('td').find('input[class="disable"]').removeAttr('disabled');
  } else {
  	$(this).closest('td').next('td').find('input[class="disable"]').attr('disabled', 'disabled');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
     <td><input type="checkbox"></td>
     <td><input class="disable" disabled="" type="checkbox"></td>
  </tr>
  <br>
  <tr>
    <td><input type="checkbox"></td>
    <td><input class="disable" disabled="" type="checkbox"></td>
  </tr>

</table>

＆＃13;

由于您的复选框位于td内，因此您需要遍历td然后转到下一个td＆amp;找到checkbox。

希望这会对你有所帮助。

如何启用/禁用另一个复选框旁边的复选框？

3 个答案: