Question

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

Answer 1

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