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

ie 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.

Answer 3

This is from 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 the click events are fired even on disabled buttons. So in the event, you have to evaluate disabledness of the button and cancel the event:

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

Answer 4

Try:

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

Attribute values should be strings, not boolean

Answer 5

Just to add some extra value to the other answers posted here.

I think your wording is a bit off and by the looks of it, you want to know how to both disable and re-enable a button cross browser.

The disabled attribute, when present, should always disable the element, no matter what it's value is. The recommended value is disabled="disabled" .

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

In order to re-enable the element you'll want to remove the disabled attrbitute altogether (as pointed out in other answers).

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