JQuery Attr visible not working with IE7 or below

Question

I have a page in which I enable, and make the button visible using JQuery. This is what I am using:

//disable save until validated
$("#btnSave").attr("disabled", true);

Once the validation of a component is completed, I enable the save button:

$("#btnSave").attr("disabled", false);

Problem: It works find with Chrome, FF, IE8+, but does not work with IE7 and below (surprised :O ). Is there any hack for this or a workaround this issue.

Answer 1

Use prop instead of attr

$("#btnSave").prop("disabled", false);

If you want to use attr (although I'd prefer not to but for the sake of completion)

$('#btnSave').attr('disabled', 'disabled')

Answer 2

Directly taken from the documentation :

"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

Answer 3

As everyone has stated, you need to use $("#btnSave").prop("disabled", false);

But why? Because IE8 only accepts the disabled property as:

<button disabled="disabled">

You instructed jQuery to set the literal value of the attribute to "true", resulting in:

<button disabled="true">

However, using .prop , jQuery will automagically set the correct value for that attribute, whether it be checked/selected/disabled, or just a literal attribute value.

Answer 4

EXAMPLE

  $(function(){
    $('#button1').prop('disabled', true);
       // $('#button1').prop('disabled', null);//if you want to enable it
    });

Here is a jsfiddle .