Question

我有一组复选框，其中一个复选框的标签为“无”。当勾选这个时，我希望其他人被禁用。如果未选中“无”复选框，则会再次启用已禁用的复选框。

我有以下代码：

 $(document).ready(function(){
 $("#select_none").click(function() 
 {
 $('#select_blue').attr('disabled', true);
 $('#select_green').attr('disabled', true);
 $('#select_red').attr('disabled', true);
 $('#select_black').attr('disabled', true);     
 $('#select_white').attr('disabled', true);
 $('#select_yellow').attr('disabled', true);
 $('#select_pink).attr('disabled', true);

 });
});

如果单击该复选框，则只会禁用，但不会切换。

有人可以帮我解决切换功能吗？

Answer 1

试试此代码

$(document).ready(function(){
 $("#select_none").click(function() 
 {
     if(this.checked) {
     $('#select_blue').attr('disabled', true);
     $('#select_green').attr('disabled', true);
     $('#select_red').attr('disabled', true);
     $('#select_black').attr('disabled', true);     
     $('#select_white').attr('disabled', true);
     $('#select_yellow').attr('disabled', true);
     $('#select_pink').attr('disabled', true);
     }else {
      $('#select_blue').removeAttr('disabled');
     $('#select_green').removeAttr('disabled');
     $('#select_red').removeAttr('disabled');
     $('#select_black').removeAttr('disabled');    
     $('#select_white').removeAttr('disabled');
     $('#select_yellow').removeAttr('disabled');
     $('#select_pink').removeAttr('disabled');
     }

 });
});

Answer 2

您可以使用toggle event。

当你在这里时，你也可以考虑给你的select_<colour>个复选框一个普通的课程，让你做$('.colour-select').attr('disabled', true);

Answer 3

可以试试这个：

$(document).ready(function(){
 $("#select_none").click(function() 
 {
 $('#select_blue').attr('disabled', $("#select_none").attr('checked'));
 $('#select_green').attr('disabled', $("#select_none").attr('checked'));
 $('#select_red').attr('disabled', $("#select_none").attr('checked'));
 $('#select_black').attr('disabled', $("#select_none").attr('checked'));     
 $('#select_white').attr('disabled', $("#select_none").attr('checked'));
 $('#select_yellow').attr('disabled', $("#select_none").attr('checked'));
 $('#select_pink).attr('disabled', $("#select_none").attr('checked'));

 });
});

如果不起作用，请检查是否选中了select_none。如果为true，则将所有这些复选框设置为已禁用，就像您已经这样做的那样。如果为false，请删除“已禁用”属性。

单个复选框更新多个复选框的状态

3 个答案: