Question

I have a radio button control with two items in it.

<xforms:select1 ref="add-delete" appearance="full">
    <xforms:item>
        <xforms:label>Add</xforms:label>
        <xforms:value>A</xforms:value>
    </xforms:item>
    <xforms:item>
        <xforms:label>Delete</xforms:label>
        <xforms:value>D</xforms:value>
    </xforms:item>
</xforms:select1>

I want to disable only the radio button ‘Delete’ and not the radio button ‘Add’ on condition X. How can I carry out this ?

I tried using class attribute with xforms:item but that is not working. Is there any other way to do this ?

Answer 1

Good question. And unfortunately, this isn’t as easy to do as it should:

If you just wanted the delete radio button to be hidden, instead of disabled, you can replace the <xforms:item> for the “Delete” by an <xforms:itemset ref="…"> that you bind to a node which you make non-relevant when you want that radio button not to show. But you can’t use that same technique to disable the radio button by binding the itemset to a node you make read-only. (And yes, it would be good if you could do that.)

As it stands, I think you’ll need to:

1. Create 2 <xforms:select1>. One for “Add”, one for “Delete”, so you can make the second one readonly upon some condition.
2. To make it readonly, but not have the “Add” be read-only as well, you need to bind them to 2 separate node.
3. If you want to have 1 node with either A or D, you need to create a calculate to populate that node based on the 2 values.
4. You want the values to be exclusive, and they won’t be if you have two <xforms:select1>, so you need to deselect “delete” when “add” is selected reacting to xforms-select, and vice versa.

In the model, you would have:

<xforms:instance>
    <instance>
        <add/>
        <delete/>
        <add-delete/>
        <delete-enabled>true</delete-enabled>
    </instance>
</xforms:instance>
<xforms:bind ref="add-delete" calculate="string-join((../add, ../delete), ' ')"/>
<xforms:bind ref="delete" readonly="../delete-enabled = 'false'"/>

And in the view:

<xforms:select1 ref="instance()/add" appearance="full">
    <xforms:item>
        <xforms:label>Add</xforms:label>
        <xforms:value>A</xforms:value>
    </xforms:item>
    <xforms:setvalue ev:event="xforms-select" ref="instance()/delete"/>
</xforms:select1>
<xforms:select1 ref="instance()/delete" appearance="full">
    <xforms:item>
        <xforms:label>Delete</xforms:label>
        <xforms:value>D</xforms:value>
    </xforms:item>
    <xforms:setvalue ev:event="xforms-select" ref="instance()/add"/>
</xforms:select1>

And see this Gist for the full source of this example.