如果选中另一个复选框，则 JQuery 禁用复选框答案

【问题标题】：JQuery to disable checkbox if another is checked如果选中另一个复选框，则 JQuery 禁用复选框
【发布时间】：2014-03-31 14:15:29
【问题描述】：

如果用户选中它，我有一个显示 div 的复选框。该 div 包含 2 个其他复选框。如果选中这两个复选框中的一个，我想禁用第一个复选框。一些hmtl：

        <p><input id="noneAboveCheck" type="checkbox" />None of the above</p>
        <div id="noneAbove" class="hidden">
          <p><input id="incarcerated" type="checkbox" /></p>
          <p><input id="support" type="checkbox" />Blah Blah</p>
        </div>

这里是我的 jQuery，div 的切换可以工作，但不能禁用。警报在那里进行测试，但它也没有显示，所以我认为我的第一行是不正确的：

    $('#noneAboveCheck').change(function () {                
      $('#noneAbove').toggle(this.checked);
    }).change();

    if ($('#incarcerated, #support').attr("checked")) {
      alert("hello");
      $('#noneAboveCheck').attr('disabled', true);
    } else {
      $('#noneAboveCheck').attr('disabled', false);
    }

最后一件事，我（不幸的是）仍在使用 jQuery 1.4，所以我认为我不能使用 .prop()。感谢大家的帮助。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您需要将第二段代码包装在更改事件中：

$('#noneAboveCheck').change(function () {
    $('#noneAbove').toggle(this.checked);
}).change();

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

jsFiddle example

【讨论】：

应该if ($(this).attr("checked")) 是if ($('#incarcerated').attr("checked") || $('#support').attr("checked")) 吗？选中两个较低的复选框，然后取消选中一个将再次启用第一个复选框。
@j08691 谢谢你，我应该知道添加更改事件。将尽快标记为已接受。
if ($(this).attr("checked")) 仅适用于 jquery 1.6+ 使用.prop() 更安全。

【解决方案2】：

$('#noneAboveCheck').change(function () {
    $('#noneAbove').toggle(this.checked);
}).change();

$('#incarcerated, #support').change(function () {
    if ($(this).is(":checked")) {
        $('#noneAboveCheck').attr('disabled', true);
    } else {
        $('#noneAboveCheck').attr('disabled', false);
    }
});

演示：

http://jsfiddle.net/vy6ce/

【讨论】：

【解决方案3】：

var mainHider = $('#noneAboveCheck');
mainHider.click(function(){
    if ($(this).is(':checked')) {
        $('#noneAbove').hide();
    } else {
        $('#noneAbove').show();
    }    
});

$('#incarcerated,#support').click(function(){
    if ($('#incarcerated').is(':checked') || $('#support').is(':checked')) {
        mainHider.attr('disabled','disabled');
    } else {
        mainHider.removeAttr('disabled');
    }

});

fiddle

【讨论】：