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

时间:2016-08-21 18:15:08

标签: javascript jquery html5 css3 checkbox

我在一个单独的标签内有四个复选框。

如果我选中第一个复选框,则所有剩余的复选框都将被禁用。如果我再次点击第一次,则会启用所有复选框。 如果我选中任何其他复选框,则其他复选框仍然处于启用状态:我可以选择多个复选框。 See image here

我该如何设置?

2 个答案:

答案 0 :(得分:0)

如果您要询问如何禁用所有其他“复选框”,请使用radiogroups。如果你说第一个复选框自动触发其他复选框上的切换,请尝试取消组合,或者将它们分开,因为听起来好像你有某种错误的分组和依赖。

答案 1 :(得分:0)

试试这个:

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);
    }
});

工作示例:https://jsfiddle.net/e26vnnk2/