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

JQuery to disable checkbox if another is checked

提问by Dan

I have one checkbox that shows a div if the user checks it. That div contains 2 other checkboxes. If one of those two checkboxes are checked, I want to disable the first checkbox. Some hmtl:

如果用户选中它，我有一个复选框会显示一个 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>

And here my jQuery, the toggle for the div works, but not the disabling. The alert was there for testing and it doesnt show either, so I assume my first line is incorrect:

在这里，我的 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);
    }

One last thing, I am (unfortunately) still using jQuery 1.4, so I dont think I can use .prop(). Thanks for all the help.

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

回答by j08691

You need to wrap the second chunk of code in a change event:

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

$('#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

jsFiddle 示例

回答by RGS

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

Demo:

演示：

http://jsfiddle.net/vy6ce/

http://jsfiddle.net/vy6ce/

回答by sonnenhaft

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

小提琴