如果我选择第一个复选框，则禁用所有剩余的复选框

Question

I have four check boxes inside a separate label.

If I select first check box then all remaining check boxes will be disable. If I click first again, all check boxes will be enabled. If I select any other check box, the others are still enabled: I can select more than one. See image here

How can I set this up?

Answer 1

If you are asking in order to find out how to disable all other "checkboxes," use radiogroups. If you are saying that the first checkbox auto-triggers a toggle on the other checkboxes, try ungrouping them, or making them separate in and of themselves, because it sounds as if you have some kind of faulty grouping and dependency there.

Answer 2

Try this:

HTML:

<label for="one"><input type="checkbox" name="one" id="one"></label>
<label for="two"><input type="checkbox" name="two" id="two"></label>
<label for="three"><input type="checkbox" name="three" id="three"></label>
<label for="four"><input type="checkbox" name="four" id="four"></label>

jQuery:

$('input[type="checkbox"]').on('change', function() {
    if($('input[type="checkbox"]').eq(0).is(':checked')){
        $('input[type="checkbox"]').not($(this)).attr('disabled', true);
    }
    else{
        $('input[type="checkbox"]').not($(this)).attr('disabled', false);
    }
});

Working example: https://jsfiddle.net/e26vnnk2/