CODEWITHSUNDEEP
jqueryhtmlbutton
Tom
Tom

Reputation: 71

Disabling a Button in IE6, IE7, IE8?

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

Upvotes: 6

Views: 10712

Answers (5)

andy
andy

Reputation: 1105

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

Upvotes: 0

phihag
phihag

Reputation: 287775

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");

Upvotes: 16

Michael Doleman
Michael Doleman

Reputation: 552

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.

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 53991

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');

Upvotes: 0

Alex
Alex

Reputation: 7374

Try:

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

Attribute values should be strings, not boolean

Upvotes: 0

Related Questions