2

Is it possible the users to select only one value from a <xp:checkBoxGroup>? In other words, the checkBoxGroup to work like a radioButton?

I know I could easily change the control to a radioButton but I was just curios.

Florin M.
  • 2,159
  • 4
  • 39
  • 97
  • With some client-side magic, yes. See this answer for instance: http://stackoverflow.com/a/9709425/785061 – Per Henrik Lausten Oct 14 '14 at 05:47
  • 4
    Tame your curiosity:-) it violates user expectations. Only use case would be select zero or one, since a radio button is: select exactly one. But adding "-none-" as default option would make the intention clearer than a bunch of checkboxes – stwissel Oct 14 '14 at 10:58
  • http://ux.stackexchange.com/questions/41924/is-it-acceptable-practice-to-use-checkboxes-as-radio-buttons – Frantisek Kossuth Oct 14 '14 at 16:12

1 Answers1

3

You can use the following code to use a checkboxgroup with a single selection. The code is not perfect, because you need two clicks to activate a new checkbox. 

<xp:checkBoxGroup id="checkBoxGroup1">
    <xp:selectItem itemLabel="first" itemValue="1"></xp:selectItem>
    <xp:selectItem itemLabel="second" itemValue="2"></xp:selectItem>
    <xp:selectItem itemLabel="third" itemValue="3"></xp:selectItem>
    <xp:selectItem itemLabel="fourth" itemValue="4"></xp:selectItem>



    <xp:eventHandler event="onchange" submit="true"
        refreshMode="partial" refreshId="checkBoxGroup1">
        <xp:this.action>
            <![CDATA[#{javascript:var checkedValues = getComponent("checkBoxGroup1").getAttributes().get("value")
                varArray = new Array(0)
                varArray[0] =  checkedValues.length < 2 ? checkedValues[0] : undefined

                getComponent("checkBoxGroup1").getAttributes().put("value", varArray);
            }]]>
        </xp:this.action></xp:eventHandler></xp:checkBoxGroup>
PoisonedYouth
  • 548
  • 3
  • 16