Question

This code simply toggles checkboxes and adjusts text box css. By default, the text box is readonly, then when you click the checkbox it should adjust the readonly and highlight the text box.

The following code works fine in 1.3.2, but doesn’t do anything in 1.6.2. Has something changed?

$(document).ready(function() {
    $("#toggleAll").click(function() {
        var $checkBoxes = $("input:checkbox.closeItem");
        $checkBoxes.attr("checked", $(this).attr("checked"));

       $("input:checkbox.closeItem").each(function() {
            HandleCheckboxCheck($(this));
        });
    });

    $("input:checkbox.closeItem").click(function() {
        HandleCheckboxCheck($(this));
     });

});
function HandleCheckboxCheck($check) {
    var $trackingNumber = $check.parent().siblings("td.trackingNumber").children(0);
        if ($check.attr("checked") == true) {
            $check.attr("checked", true);
            $trackingNumber.addClass("highlight");
            $trackingNumber.removeAttr("readonly");
            $trackingNumber.val("");
        } else {
            $check.attr("checked", false);
            $trackingNumber.removeClass("highlight");
            $trackingNumber.attr("readonly", "readonly");
            $trackingNumber.val("Check to Enable");
        }
    }

Answer 1

.prop is the proper way to toggle checkboxes.

http://api.jquery.com/prop/

The behavior of .attr is covered in this section:

$(elem).attr(“checked”)(1.6) “checked” (String) Initial state of the checkbox; does not change
$(elem).attr(“checked”)(1.6.1+) “checked” (String) Will change with checkbox state
$(elem).attr(“checked”)(pre-1.6) true (Boolean) Changed with checkbox state