如何在选中复选框时禁用和取消选中复选框？答案

【问题标题】：How to disable and uncheck checkboxes on check of checkbox?如何在选中复选框时禁用和取消选中复选框？
【发布时间】：2013-01-19 17:44:36
【问题描述】：

我有一个 jquery 脚本，它连续禁用所有复选框并将它们标记为选中：

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
     $("input.group1").attr("disabled", true);
     $("input.group1").attr("checked", true);
  } else {
     $("input.group1").removeAttr("disabled","checked");

  }
}

这是我对 html 的摆弄：http://jsfiddle.net/3fksv/16/

我希望其余复选框再次显示为活动状态，并且在取消选中复选框时取消选中。我在脚本中做错了什么？

【问题讨论】：

尝试使用.prop 而不是.attr
您在 document.ready 上调用 enable_cb() 将使 this.checked 未定义。这就是为什么它没有正确初始化的原因。使用 attr 你需要使用 'checked'

标签： jquery checkbox

【解决方案1】：

checked 和 disabled 是属性，从 jQuery 1.6 开始，用于修改元素的属性，应使用 prop 方法而不是 attr。

function enable_cb() {
   $("input.group1")
         .prop("disabled", this.checked)
         .prop("checked", this.checked);
}

http://jsfiddle.net/JeqE5/

【讨论】：

documentation about removeAttr() 只谈论 .prop() 的 IE6/7/8 问题，对我来说似乎不是很清楚 :( 感谢您的回答
这在小提琴中效果很好，但在我的页面上不起作用:(
@Christo 您在控制台上看到任何错误吗？您使用的是哪个版本的 jQuery？

【解决方案2】：

我不认为你可以像那样一次删除两个属性。您可能需要对 removeAttr() 函数进行两次调用 -

$("input.group1").removeAttr("disabled");
$("input.group1").removeAttr("checked");

正如@nickf 正确提到的，这些命令也可以被链接起来——

$("input.group1").removeAttr("disabled").removeAttr("checked");

【讨论】：

可以，但必须是单个空格分隔的字符串
它在文档中...“要删除的属性；从 1.7 版开始，它可以是用空格分隔的属性列表。”
不管怎样，对于较新的版本，使用 .prop 而不是 .attr 来表示复选框状态/禁用状态更正确。
哇 - 完全略过了那部分：P 很高兴知道@sam！谢谢！

【解决方案3】：

演示：http://jsfiddle.net/3fksv/18/

function enable_cb() {
   if (this.checked) {
      $("input.group1").attr("disabled", 'disabled');
      $("input.group1").attr("checked", 'checked');
   } else {
      $("input.group1").removeAttr("disabled","checked");
   }
}

$(function() {
   $("input.group1").attr("disabled", 'disabled');
   $("input.group1").attr("checked", 'checked');
   $("#group1").click(enable_cb);
});

【讨论】：