JQuery 1.6.2 禁用复选框禁用标签答案

【问题标题】：JQuery 1.6.2 disable checkbox disables labelJQuery 1.6.2 禁用复选框禁用标签
【发布时间】：2011-08-16 21:07:29
【问题描述】：

我们有一些现有的 JavaScript 用于启用/禁用一堆复选框。从 JQuery 1.4.4 升级到 1.6.2 后，它停止工作。以下是每个复选框的 HTML 外观：

<li class="option_row">
  <input id="checked27" class="checkbox normal" type="checkbox" disabled="disabled" checked="checked">
    <label class="disabled" for="checked27">
      <span>Foo</span>
  </label>
</li>

启用复选框的 JavaScript 附加到一个链接（使用类“enableCheckboxesLink”）：

var checkboxes = $('.checkbox');
$('.enableCheckboxesLink').click(function() {
  checkboxes.attr('disabled', '').next().removeClass('disabled');
});

换句话说，我们将 JavaScript 附加到“enableCheckboxesLink”，它会查找所有复选框（即所有具有“checkbox”类的元素）并删除“disabled”属性。

当我停止浏览 JQuery 1.6.2 中的代码时，我可以看到 var "checkboxes" 包含例如“input#checked27.checkbox”，即上面的复选框。但是当我执行上面的最后一行时，它只会从 label 中删除“禁用”属性，而不是复选框。为什么？这是 JQuery 1.6.2 中的错误吗？它在 JQuery 1.4.4 中工作（也就是说，上面的代码同时启用了复选框和标签）。

【问题讨论】：

我认为这是一个错字，但你没有关闭
@Matthew，我想我是从 Firebug 树显示或其他东西而不是实际来源复制/粘贴的——这可能是没有结尾斜杠的原因。

标签： jquery checkbox label

【解决方案1】：

jQuery 1.6 引入了 prop() 方法，推荐用于设置 disabled 属性。见this documentation。

所以，这应该可以解决您的问题：

checkboxes.prop('disabled', false).next().removeClass('disabled');

这将完全删除 'disabled' 属性，而不是将其设置为空字符串，这仍然意味着它已被禁用。

【讨论】：

关于使用.prop()的好建议---感谢您指出。根本问题似乎是在关闭禁用时使用'' 而不是false。

【解决方案2】：

您可以使用以下代码，通过使用 attr() 方法并将禁用设置为 false 来删除 disabled="disabled" 属性>.

var checkboxes = $('.checkbox');
$('.enableCheckboxesLink').click(function() {
  checkboxes.prop('disabled', false).next().removeClass('disabled');
});

【讨论】：

你能提供参考吗？ .attr() documentation 使用 disabled="disabled"。并且没有人指出任何关于为什么这会在 JQuery 1.4.4 上工作的文档。而不是在 JQuery 1.6.2 上。
问题不在于您在 INPUT 上指定了 disabled="disabled"。当您应该使用 checkboxes.attr('disabled', false) 或 checkboxes.removeAttr('disabled') 来启用复选框时，您使用了 checkboxes.attr('disabled', '') 。我不能说为什么它在 jQuery 1.4.2 中有效，但我认为它不是有效的语法。我会给我上面提到的一种方法试一试，看看会发生什么。
是的，这似乎是问题的根源。另见another question on disabled Boolean values。 Josh 对.prop() 的使用提出了一个很好的建议，从那里的讨论中我只能猜测旧版本的 JQuery 在处理属性和属性模糊中的非布尔值时更加宽松。
很高兴修复了它！是的，在 1.6+ 中，您应该使用 prop() 方法来处理属性。我相应地更新了我的答案。

【解决方案3】：

checkboxes.attr('disabled', '').next().removeClass('disabled');

disabled 类被移除的原因是 next().removeClass('disabled') （取下一个元素并删除禁用的类）

我不明白为什么复选框没有被禁用你为什么不删除：

var checkboxes = $('.checkbox');

并改变：

checkboxes.attr('disabled', '').next().removeClass('disabled');

到：

$('.checkbox').attr('disabled', '').next().removeClass('disabled');

【讨论】：

【解决方案4】：

改用removeAttr('disabled')。见http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F

【讨论】：