CODEWITHSUNDEEP
jqueryinternet-explorer-8disabled-input
mtmurdock
mtmurdock

Reputation: 13062

Input appears disabled in IE, but is not disabled

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.

Upvotes: 5

Views: 6947

Answers (2)

RemarkLima
RemarkLima

Reputation: 12037

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

Upvotes: 2

wirey00
wirey00

Reputation: 33661

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/

Upvotes: 7

Related Questions