Disabling a Button 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 the HTML of

<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 ?

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

Edit: Note also that <button id='id' disabled>foobar</button> is valid html

Answer 1

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

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

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

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

Answer 2

I was having identical issues in IE8, and was able to solve them, so thought I'd add-in a couple points. The solution offered by phihag is both right and wrong. It's true that XML/HTML won't accept a true boolean value as an attribute--but we're talking about jQuery syntax, here, which does accept booleans as arguments, and sets attributes appropriately.

With the disabling and enabling of input elements, in IE, what I found to work, consistently, is to simply not "hard-code" the initial desired value directly in the X/HTML. If a control is to be disabled from the initial render, it's best to call a function as soon as the page is rendered, to disable it. Perhaps a bit of a kludge and, like many things, it ought not be that way, but that's what's ended-up working for me. Very simple.

Hope that helps someone. I went through a lot of debugging efforts to pinpoint that one.