Polymer 1.x: How To Data Bind To A Variable Boolean Attribute?

Question How do I bind a variable to/as the disabled attribute of a element? Based on the results of my code, it looks like the only way to toggle the disa

Solution 1:

disabled is a native HTML attribute. To bind to native attributes, you must use $= instead of =.

<paper-checkboxdisabled$="{{isDisabled}}">Foo</paper-checkbox>

Solution 2:

You need to bind the attribute like so: disabled=[[bool]]. This is the equivalent of calling element.disabled = bool where element is some instance of paper-checkbox.

See this forked JSBin for an example.

Basically a Boolean HTMLAttribute will be true if that attribute exists, and false if it does not exist. So for:

<paper-checkboxdisabled="[[isDisabled]]"></paper-checkbox>

The output HTML will look like this:

<paper-checkboxdisabled></paper-checkbox>

when isDisabled is true, and look like this:

<paper-checkbox></paper-checkbox>

when isDisabled is false.

That's why setting

<paper-checkboxdisabled="false"></paper-checkbox>

will still make the checkbox disabled.

See the last paragraph in Polymer's Documentation on Attribute Deserialization

Solution 3:

Haven't you left out disabled$={{Boolean}}?