Question

我有两个复选框A和B。它们应遵循以下规则：

应始终启用A。
仅当选中A时，才应启用B
如果选中了A和B，并且以后未选中A，则应该选中B并自动将其禁用。

到目前为止，我有此代码：

HTML

<input type="checkbox" id="A" />A
<input type="checkbox" id="B" />B

jQuery

$('#A').change(function () {
    if ($(this).attr("checked")) {
        $('#B').attr('disabled', false)
    } else {
        $('#B')
            .attr('disabled', true)
            .attr('checked', false);
    }
}).change();

Fiddle here。

Answer 1

我相信这就是您要实现的目标。

$('#A').on('change', function(e){
	if(e.target.checked){
    $('#B').prop('disabled', false);
  } else{
  	$('#B').prop('checked', false).prop('disabled', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
    The if statement doesn't trigger when checking checkbox A. B just stays disabled.
</p>
<p>
    <input checked id="A" type="checkbox" />A
</p>

<p>
    <input id="B" type="checkbox" />B
</p>

在jQuery中添加事件处理程序的首选方法是.on()

此外，您有一个重复的.change()。

JS小提琴：enter link description here

Answer 2

使用jQuery，您可以使用is()来检查状态。

$('#A').change(function() {
  $("#B")
  .prop("disabled", !$(this).is(":checked"))
  .prop("checked",($(this).is(":checked") && $("#B").is(":checked")));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="A" />A
<input type="checkbox" id="B" disabled />B

Answer 3

您可以将本机this.checked用于复选框。另外，由于您要测试DOM中元素的状态，因此可以使用prop()来获取和更改DOM中的属性。

$('#A').change(function () {
  var $B = $('#B');
  
  $B.prop('disabled', !this.checked);
  
  if (!this.checked) $B.prop('checked', false);
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="A" />A
<input type="checkbox" id="B" />B

为什么我在选中复选框A时未启用复选框B？

3 个答案: