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

@Tom: I know how you feel. If you see Redmond on fire in the news, give me a call - I'll go and chuck some petrol on it. — Bojangles, Jul 05 '11 at 15:39
@JamWaffles I'll buy you the petrol, it's expensive these days. — , Jul 05 '11 at 15:41
@WTP Actually, this is a bug in Chrome/FF. *IE* is strictly following the spec here. — phihag, Jul 05 '11 at 15:41
@WTP: Thanks :-D it will go to a good cause, so you can live with a free conscience. — Bojangles, Jul 05 '11 at 15:44

score 16 · Accepted Answer · edited Dec 03 '13 at 14:37

16

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

edited Dec 03 '13 at 14:37

RandomSeed

29,301
6
52
87

answered Jul 05 '11 at 15:35

phihag

278,196
72
453
469

Sorry, but this isn't right. When you are trying to check a checkbox in JQuery the only way it will work is with $("input[type=checkbox]").attr("checked",true); – Liam Bailey Jul 05 '11 at 15:42
@philhag - is it just me or does `` actually disable the button in IE ? http://jsfiddle.net/kxVRx/9/ – Tom Jul 05 '11 at 15:47
@Liam Baily The behavior is fixed in the HTML5 standard, so I'm not certain how it couldn't be right. Anyway, `$("input[type=checkbox]").attr("checked","checked");` [*does* work](http://phihag.de/2011/so/jquery-checked.html). – phihag Jul 05 '11 at 15:47
@Tom No, it's not you. This is the correct behavior. An enabled button has no attribute `disabled`. Updated the answer to reflect that. – phihag Jul 05 '11 at 15:48
1

@philhag - so you can actually use [directly via html] `` or is this invalid ? – Tom Jul 05 '11 at 15:50
@Tom This is perfectly valid and disables your button right from the start. If you wish, you can write `disabled="disabled"` to make that clear (and allow your page to be valid XML). – phihag Jul 05 '11 at 15:51
@philhag - legend! thanks for brightening up my day and allowing me to move back into the world of Chrome and FF and away from evil evil IE :) – Tom Jul 05 '11 at 15:52

score 1 · Answer 2 · answered Sep 09 '13 at 16:47

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.

andy · Answer 3 · 2014-03-27T23:39:15.350

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

score 0 · Answer 4 · answered Jul 05 '11 at 15:33

0

Try:

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

Attribute values should be strings, not boolean

answered Jul 05 '11 at 15:33

Alex

7,320
1
18
31

He wants to disable, not enable the button – Liam Bailey Jul 05 '11 at 15:35
@alex - i want to disable the button in IE - the problem is that IE doesn't seem to like the above code ? i.e. a user can just click and it doesn't disable the button ? – Tom Jul 05 '11 at 15:36
D'oh again. I keep doing that today. Edited – Alex Jul 05 '11 at 15:37

score 0 · Answer 5 · answered Jul 05 '11 at 15:38

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

Disabling a Button in IE6, IE7, IE8?

5 Answers5