Disabling buttons in IE6, IE7, IE8?

Question

I am trying to disable a button - using jQuery 1.4.4 the following code in IE

jQuery('#id').attr("disabled", true);

With HTML

 <button id="id" type="button" class="some-class" disabled="">Comment</button> 

Works in FF, Chrome, etc. and of course doesn't work in IE? How can i fix it?

i.e. <button disabled="disabled"> doesn't seem to work in IE or?

Edit: Please note that <button id='id' disabled>foobar</button> is a valid html

Answer 1

XML / HTML attribute values ​​are strings. The values ​​"true" and "false" have no special meaning (technically they are not even allowed) . The convention is to set the value for the attribute name:

 jQuery('#id').attr("disabled", "disabled"); 

Also note that in your HTML <button disabled=""> already disable the button. Just leave the disabled attribute or enable it again with jQuery:

 jQuery('#id').removeAttr("disabled"); 

Answer 2

I had the same problems in IE8 and I was able to solve them, so I thought I'd add a couple of points. The solution offered by phihag is right and wrong. It is true that XML / HTML does not accept a true boolean value as an attribute, but we are talking about the jQuery syntax, here, which takes boolean values ​​as arguments and sets the attributes accordingly.

With disabling and enabling input elements in IE, what I found to work consistently is simply not to "hard code" the initial required value directly in X / HTML. If the control should be disconnected from the original rendering, it is best to call the function immediately after the page is displayed in order to disable it. Perhaps a little shreds and, like many things, this should not be so, but what ended up working for me. Very simple.

Hope this helps someone. I spent a lot of debugging efforts to pinpoint this one.

Answer 3

Try:

  jQuery('#id').attr("disabled", "disabled"); 

Attribute values ​​must be strings, not boolean

Answer 4

Just add extra value to the other answers posted here.

I think your wording is a bit off, and looking at it, you want to know how to disable and enable the browser with the crossroads of buttons again.

The disabled attribute, when present, should always disable an element, regardless of its value. The recommended value is disabled="disabled" .

 $('#id').attr("disabled", "disabled") 

To enable the element again, you will want to completely remove the disabled attribute (as indicated in other answers).

 $('#id').removeAttr('disabled'); 

Answer 5

This is from the jQuery API Documentation :

 $( ".selector" ).button( "option", "disabled", true ); 

It works for me even in IE 8 with jQuery UI 1.8.14 or higher. In older versions, click events fire even when the buttons are disabled. Therefore, in this case, you should evaluate the failure rate of the button and cancel the event:

 function clickHandler(event) { if ($(event.currentTarget).button("option", "disabled")) { return false; } // other handle stuff... }