Question

如果用户检查，我有一个显示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（）。感谢您的帮助。

Answer 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

Answer 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/

Answer 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

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

3 个答案: