How to declaratively bind pseudo-boolean attributes like disabled/checked to boolean values?

Question

Is there an easy way to bind attributes like disabled or checked to true/false properties? Something like

<button disabled="{{myBooleanProperty}}">Ok</button>

doesn't work as desired. If myBooleanProperty is false, this sets disabled="false", which is true as far as HTML is concerned.

Is there a filter expression that can hint to the binding parser that the attribute should be completely removed if the value is false?

Answer 1

See conditional attributes: http://www.polymer-project.org/docs/polymer/binding-types.html#conditional-attributes

Example:

<button disabled?="{{myBooleanProperty}}">Ok</button>

will toggle disabled depending on the truthiness of myBooleanProperty.

Answer 2

If you're using Polymer 1.0:

<button disabled$="{{myBooleanProperty}}">Ok</button>

See the docs on data bindings.