Input appears disabled in IE, but is 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 overriding the form submit action so I can check a few things before actually submitting the form. Before doing this, I disable the button, so the user doesn't 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 re-enable the button.

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

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

Answer 1

If you are using jQuery 1.6+ you should really be using .prop because 'disabled' is a property of the element

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

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

Answer 2

As Wirey say is the best way using prop, however if you're stuck with an old version of jQuery you can "mirror" the statement for IE, so for example:

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

Same goes for ReadOnly (obviously on textboxs and the like)

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