views:

151

answers:

7

Hi,

I've read that you can disable (make physically unclickable) a html button simply but appending 'disable' to its tag, but not as an attribute, as follows:

<input type="button" name=myButton value="disable" disabled>

Since this setting is not an attribute, how can I add this in dynamically via JavaScript to disable a button that was previously enabled?

A: 
 <input type="button" name=myButton value="disable" disabled="disabled">
Lars Mæhlum
That's doing the same thing as the OP
dplass
The question asks about JavaScript.
David Dorward
What I was pointing out was that the diabled part of his tag was indeed an attribute. The value is just optional to most browsers.If you add the attribute "disabled" with a value of "disabled", it will work..
Lars Mæhlum
A: 

If you have the button object, called b: b.disabled=false;

dplass
+2  A: 

It's still an attribute. Setting it to:

<input type="button" name=myButton value="disable" disabled="disabled">

... is valid.

Oli
Valid, but the spec says that syntax should be avoided: http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.3
David Dorward
All browsers look for disabled="disabled", i know the spec say to avoid it, but i have never had any problems setting disabled="disabled" or checked="checked" or selected="selected"...Just don't do disabled="true"...only some browsers will recognize that
Bob Fincheimer
Clearly not all browsers support it — the spec wouldn't be so explicit if they didn't. They just aren't in common usage any more.
David Dorward
BTW, the question says "how can I add this in dynamically via JavaScript"
David Dorward
Sure but the question goes on to talk about disabled not being an attribute. My answer is about dispelling that and saying you can use it as an attribute. You *can* also use the DOM property.
Oli
+2  A: 

It is an attribute, but a boolean one (so it doesn't need a name, just a value -- I know, it's weird). You can set the property equivalent in Javascript:

document.getElementsByName("myButton")[0].disabled = true;
Andy E
It does need a value, it is the name that it doesn't need. (Strange, but true).
David Dorward
@David: I remember reading that before, fixed. It is strange indeed and would probably make more sense if syntax highlighters honoured it correctly :-)
Andy E
+2  A: 

Since this setting is not an attribute

It is an attribute.

Some attributes are defined as boolean, which means you can specify their value and leave everything else out. i.e. Instead of disabled="disabled", you include only the bold part. In HTML 4, you should include only the bold part as the full version is marked as a feature with limited support (although that is less true now then when the spec was written).

The DOM property is also called disabled and is a boolean that takes true or false.

foo.disabled = true;

In theory you can also foo.setAttribute('disabled', 'disabled');, but I wouldn't trust this with Internet Explorer (which is notoriously buggy when it comes to setAttribute).

David Dorward
@David: information overload fix: "CSS property" -> "element property" or "DOM property" :-)
Andy E
Whoops, memory muscle for the FAIL. Thanks for the catch, I've edited it.
David Dorward
+1  A: 

Try this: document.getElementById("id").setAttribute("disabled", "disabled")

Maksim Kondratyuk
As [David Dorward mentioned](http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript/3014678#3014678), this cannot be relied upon properly cross-browser and the property equivalent should be used instead.
Andy E
A: 

Use document.getElementById(id).disabled = "disabled";

To enable it, use document.getElementById(id).disabled = "";

If you want to support older browsers, you'll need to wrap the getElementById with a call which "ORs" it with document.all, but that's only if you really need it.

(This code was validated in IE8 and FF.)

Silicon Dragon