Boolean element attributes (disabled, checked, etc.)

[jjt]

This is how I've been conditionally putting the disabled attribute on elements, with a boolean variable:

<input disabled={isDisabled} type=... />

When disabled is falsey, the attribute won't be added. When true, it will output the following, which works in browsers but is against the HTML5 spec:

<input disabled="true" type=... />

I could get in line with the spec by setting disabled="disabled" on the element, but that requires a ternary operation instead of a boolean:

<input disabled={isDisabled ? "disabled" : false} ... />

Ideally, my current bit of JSX (at the top of this issue) would output this HTML, assuming disabled is set to true:

<input disabled type=... />

[jjt]

Just had a thought. If a known boolean attribute gets assigned a true variable as in my example, JSX should output just the attribute as per the spec. If we assign a string to a boolean attribute, it can output an attribute with a value.

[kazuho]

I am afraid you are looking for a different "JSX." Maybe https://github.com/facebook/react ?

[jjt]

Sorry, I thought they were related!

Hopefully you don't get this too often :p

[waldyrious]

Hopefully you don't get this too often :p

Unfortunately that's not the case -- see #305.