disabled and checked attributes

[Byron Weber Becker]

I'm unsure of how to interpret the documentation for the "checked" and "disabled" attributes.

  /**

   * When the value of the type attribute is radio or checkbox, the presence of

   * this Boolean attribute indicates that the control is selected by default;

   * otherwise it is ignored.

   *

   * MDN

   */

By describing it as a "Boolean attribute" I assumed I could do something like this:

val shouldBeChecked = someComplexBooleanExpression

input(`type` := "checkbox", checked := shouldBeChecked)

But this appears to cause the checkbox to be checked no matter what value shouldBeChecked has.  That's because it's rendered as either

checked = "true"

or

checked="false"

, both of which make the checkbox checked since the mere presence of the checked attribute seems to trigger rendering and the actual value is ignored (at least with Chrome and Firefox).

Given the documentation, I would have expected the code rendering to take care of this.

Same problem for the disabled attribute.

Byron

[Graham Pople]

I'm also hitting this issue.  I want to do:

  val shouldDisable = Var(false)

  val s = select(

    disabled:= Rx(shouldDisable()),

    ...
    ).render

But it fails for the reasons above.

I can work around it by having a separate Obs which monitors shouldDisable and toggles s.disabled, but it's not as clean.

[Graham Pople]

I've just found that this works:

val shouldDisable = Var(false)

  val s = select(

    ...

    ).render

shouldDisable.map(v => s.disabled = v)

I guess because it's toggling the Javascript disabled property rather than the HTML disabled boolean attribute.  So, this works fine for me.