IE disabled input but not disabled

Question

I have an input (button) on my page that looks like this:

<input id="the-button" type="submit" class="btn" value="Click me!"> 

I am redefining the action of submitting the form, so I can check a few things before submitting the form. Before doing this, I will turn off the button so that the user does not click it again, and so they can see that the page is working.

 $("#the-button").attr("disabled", true); 

If I decide that the form should not be submitted, I will turn on the button again.

 $("#the-button").attr("disabled", false); 

This works as expected in Chrome / Firefox, but in IE8 the button seems to be disabled, but you can still click on it. The desired behavior should appear to be enabled, but in IE it is grayed out.

Answer 1

If you are using jQuery 1.6+, you really should use .prop because 'disabled' is an element property

 $("#the-button").prop("disabled", true); $("#the-button").prop("disabled", false); 

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

Answer 2

According to Wirey, the best way to use prop , however, if you are stuck with the old version of jQuery, you can "mirror" the instruction for IE, for example:

 $("#the-button").attr("disabled", ""); // Enabled $("#the-button").attr("disabled", "disabled"); // Disabled 

The same goes for ReadOnly (obviously for text fields, etc.)

 $("#the-button").attr("readonly", ""); // Read Write $("#the-button").attr("readonly", "readonly"); // Read Only