Enabling/Disabling HTML elements with jQuery 1.6+

After upgrading to jQuery 1.6+ you’ll find that code you used to enable/disable elements doesn’t work anymore:

//This is supposed to enable element(s) before jQuery 1.6:
$("some-selector").attr("disabled", "");
//This is supposed to disable element(s) before jQuery 1.6:
$("some-selector").attr("disabled", "disabled"); 

But now the code above doesn’t change anything. So what’s the problem?

It’s caused by recent modifications to attr method which was used to set both attributes and properties. Since jQuery 1.6 attr method works for attributes only. As for properties like “disabled”, you have to use new prop method introduced in jQuery 1.6:

$("some-selector").prop("disabled", false); //Enables element(s) with jQuery 1.6.
$("some-selector").prop("disabled", true); //Disables element(s) with jQuery 1.6.

But what if you’re not sure about target jQuery version? Then you can check availability of prop method and use it if available:

if (typeof jQuery['prop'] === 'function') {
    // Use new prop method:
    $("some-selector").prop("disabled", false);
} else {
    // Use old-style code:
    $("some-selector").attr("disabled", "");
}

Similar solutions could be used for other properties previously assigned/accessed by jQuery attr method.

2 thoughts on “Enabling/Disabling HTML elements with jQuery 1.6+”

Leave a Comment