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.

score 24 · Accepted Answer · edited Sep 16 '18 at 06:27

(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)

I would also add an [`itemscope`](http://www.w3.org/TR/html5/microdata.html) attribute to this list — Nazariy, Sep 19 '12 at 14:48
Yes, there are potentially a bundle more when you bring in HTML5 extensions today. — bobince, Sep 19 '12 at 15:44
Here’s a list of boolean attributes in HTML5: https://github.com/kangax/html-minifier/issues/63 Note that it includes a few non-boolean attributes that have similar behavior (i.e. the empty string value maps to a different default value), such as `contenteditable` and `spellcheck`. — Mathias Bynens, May 29 '13 at 18:11

jthompson · Answer 2 · 2009-04-01T17:20:40.940

3

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.

edited Apr 01 '09 at 17:20

answered Apr 01 '09 at 16:42

jthompson

7,178
2
34
33

I know about removeAttribute(). Unfortunately the framework code I'm relying on makes calling it difficult. – levik Apr 01 '09 at 17:06

score 2 · Answer 3 · answered Apr 01 '09 at 16:40

2

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

answered Apr 01 '09 at 16:40

scunliffe

62,582
25
126
161

This changes the property, not the attribute. As I said - I'm kinda locked into setAttribute by other people's code – levik Apr 01 '09 at 17:07
ah, missed that bit. no prob, just use the removeAttribute() call others have noted. – scunliffe Apr 01 '09 at 17:58

score 1 · Answer 4 · answered Apr 01 '09 at 16:41

1

Can't you just use removeAttribute()?

answered Apr 01 '09 at 16:41

Greg

316,276
54
369
333

No. Basically I return a value and this value gets passed to a setAttribute() call I do not control. – levik Apr 01 '09 at 17:06

score 1 · Answer 5 · answered Apr 01 '09 at 16:54

1

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

element.className
element.htmlFor

answered Apr 01 '09 at 16:54

Peter Bailey

105,256
31
182
206

Boolean HTML Attributes

5 Answers5

Linked