Boolean HTML Attributes

Question

There are some attributes in HTML which are "boolean" - browsers treat them as "true" if they are present, regardless of the value. An example of such an attribute is selected on the <option> tag. Another is checked on <input type="checkbox">.

If you have a call to setAttribute() for such an attribute, there seems to be no value you can set to have the browsers consistently behave as though the attribute is missing.

For example

option.setAttribute("selected", false)

will still mark the option selected. null, empty string or undefined don't work either. If anyone knows of a value I can set to achieve my goal, please let me know, but I don't think one exists. (Because of some framework code I use, not calling setAttribute(), or calling removeAttribute() is difficult.)

I'm trying to find an exhaustive list of such attributes to special case them. Here's what I have so far:

• selected of <option>
• checked of <input>
• disabled, readonly of <input>, <select>, <option>, <optgroup>, <button>, <textarea>
• multiple of <select>

Please help me complete this list - or point me to an existing one.

Answer 1

(Because of some framework code I use, not calling setAttribute(), or calling removeAttribute() is difficult.)

Then I would submit that the framework code needs fixing, or dumping.

You can't setAttribute to unset an attribute, by design. Any solution you found involving out-of-band values like ‘null’, if it happened to work in any particular browser, would be quite invalid according to the DOM Core standard.

setAttribute() is in any case best avoided in browser (non-XML) HTML contexts. IE pre-8 doesn't know the difference between a DOM attribute and a JavaScript property, which can easily result in many really weird problems. If you're trying to set ‘checked’ as an attribute (which theoretically you should do by setting it to the string "checked"), don't expect IE to co-operate.

The full list of boolean attributes in HTML 4.01 (and hence XHTML 1.0) is (with property names where they differ in case):

checked             (input type=checkbox/radio)
selected            (option)
disabled            (input, textarea, button, select, option, optgroup)
readonly            (input type=text/password, textarea)
multiple            (select,input)
ismap     isMap     (img, input type=image)

defer               (script)
declare             (object; never used)
noresize  noResize  (frame)
nowrap    noWrap    (td, th; deprecated)
noshade   noShade   (hr; deprecated)
compact             (ul, ol, dl, menu, dir; deprecated)

Answer 2

Try removeAttribute:

option.removeAttribute("selected");

EDIT: After reading your comment, read this about setAttribute. Notably:

Even though getAttribute() returns null for missing attributes, you should use removeAttribute() instead of elt.setAttribute(attr, null) to remove the attribute.

Answer 3

on table cells e.g. TD, TH

nowrap

for the record, to change attributes like checked (on checkbox/radio elements) you can do.

myCheckBoxElem.checked = true|false;

or

myCheckBoxElem.checked = !myCheckBoxElem.checked;//toggles to the opposite state

Answer 4

Can't you just use removeAttribute()?

Answer 5

Not exactly what you're asking about, but both the 'class' and 'for' attributes receive different DOM names

element.className
element.htmlFor