JQuery 1.6.2 disable checkbox disables label

We have some existing JavaScript for enabling/disabling a bunch of checkboxes. After upgrading from JQuery 1.4.4 to 1.6.2, it stopped开发者_如何学Go working. Here's what the HTML looks like for each checkbox:

<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>

The JavaScript to enable the checkbox is attached to a link (with class "enableCheckboxesLink"):

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

In other words, we attach JavaScript to the "enableCheckboxesLink" that finds all checkboxes (that is, all elements with the "checkbox" class) and removes the "disabled" attribute.

When I stop through the code in JQuery 1.6.2, I can see that the var "checkboxes" contains e.g. "input#checked27.checkbox", which is the checkbox above. But when I execute the last line above, it only removes the "disabled" attribute from the label, not the checkbox. Why? Is this a bug in JQuery 1.6.2? It worked in JQuery 1.4.4 (that is, the code above enabled both the checkbox and the label).

---

jQuery 1.6 introduced the prop() method, which is recommended for setting the disabled attribute. See this documentation.

So, this should fix your problem:

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

This will completely remove the 'disabled' attribute, instead of setting it to an empty string, which still means it is disabled.

---

You could use the following code which removes the disabled="disabled" attribute by using the attr() method and setting disabled to false.

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

---

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

the reason why the disabled class is being removed is because of next().removeClass('disabled') (take the next element and remove class disabled)

I cannot see why the checkboxes aren't disabled why don't you remove:

var checkboxes = $('.checkbox');

and change:

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

to:

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

---

Try removeAttr('disabled') instead. See http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F