removeAttr() not removing "disabled" attribute in IE

Question

var disableSelection = function(){
    $("#elementId").attr("disabled","disabled");    
};

var enableSelection = function(){
    $("#elementId").removeAttr("disabled");
};

I have following requirements:

1. disable SELECT element in order to restrict users from selecting options
2. disabled SELECT element has some OPTION element already selected
3. on submit event enable disabled SELECT element in order to save selected value

Adding attribute "disabled" works well for IE. Yet, when I try to remove attribute by using jQuery revomeAttr() method then instead of removing attribute:

1. method adds "disabled" attribute to previously enabled SELECT element
2. method doesn't remove "disabled" attribute

Answer 1

Use .prop instead of .attr to affect an element's disabled state:

var disableSelection = function(){
    $("#elementId").prop("disabled", true);    
};

var enableSelection = function(){
    $("#elementId").prop("disabled", false);
};

For more information, see .prop() vs .attr().

Answer 2

You can use removeProp('disabled') instead. It worked for me while removeAttr('disabled') didn't.

Answer 3

Jquery Docs says, about .removeProp():

Note: Do not use this method to remove native properties such as checked, >disabled, or selected. This will remove the property completely and, once >removed, cannot be added again to element. Use .prop() to set these properties >to false instead.

Additional Notes:

In Internet Explorer prior to version 9, using .prop() to set a DOM element >property to anything other than a simple primitive value (number, string, or >boolean) can cause memory leaks if the property is not removed (using >.removeProp()) before the DOM element is removed from the document. To safely >set values on DOM objects without memory leaks, use .data().