Question

I am using the following code to disable the submit button

$("input[type='submit']").attr("disabled", "disabled");

And this code to re-enable it:

$("input[type='submit']").removeAttr("disabled");

It works fine on all browsers I’ve tried except Internet Explorer 7. IE7 will disable the button fine, but when it is re-enabled, the button still looks disabled.

This button is enabled and clickable in spite of the cursor and gray color:

(A colleague had the same trouble with IE8, but I could not reproduce it.)

I have a workaround in place that does the job, but its ugly. I have two buttons, one disabled, one not. To start, I show the disabled one and hide the enabled button.

$("input[type='submit']:first").css("display","inline"); //show disabled
$("input[type='submit']:last").css("display","none");    //hide enabled
...
<input name="Submit" type="submit" value=" Sign In " tabindex=3 disabled>
<input name="Submit" type="submit" value=" Sign In " tabindex=3 >

When my “if” conditions are met, I hide the disabled submit and show the enabled one.

Is there a more elegant CSS or JQ based solution to this problem?

Answer 1

$("input[type='submit']").prop("disabled", false);