Can I use HTML5 data-* attributes as boolean attributes? [duplicate]

Answer 1

It passes the W3.org validator, which is a good sign.

Javascript's dataset and jQuery's data functions seem to know the difference between the attribute there or missing - but the value is an empty string when it's there, and either undefined or null when it's not. To avoid confusion, I don't think I'd use that personally - I'd probably instead opt for <div data-editable="1"></div> instead.

Answer 2

The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value)

Although, the value returned is not a boolean. When you query this resource, you'll get an empty string for any empty data-* attributes.

Like so:

 domNode.dataset.draggable; // log ""
 domNode.dataset.notAdded; // log null

So, you just have to check it:

var isDraggable = (domNode.dataset.draggable != null)

Edit

Stupid to haven't tell it before. But, you can just check if the attribute exist if you want a boolean:

domNode.hasAttribute("data-draggable");