Using dijit.form.CheckBox in check box group in XPages

dijit.form.CheckBox adds a fancy styling to the plain check box, which I love. Adding it to a single check box is pretty straight forward. Just set the dojoType property of the check box to dijit.form.CheckBox. But in case of check box group its not that straight forward.

When a check box group is rendered in browser it is rendered inside <fieldset> tag. So setting the dojoType property doesn't give the desired result. You need to set the dojoType property individually on each of the check boxes in the group. Fortunately, all the check boxes share the same name so they can be targeted using simple dojo.query.

Let's say the name of your check box group is "checkBoxGroup", then just add this script block to your XPage:

<xp:scriptBlock>
<xp:this.value><![CDATA[dojo.query("input[name=\"#{id:checkBoxGroup2}\"]").forEach(
function(node) {
dojo.attr(node, {dojoType: "dijit.form.CheckBox"});
}
)]]></xp:this.value>
</xp:scriptBlock>

Make sure you place this script block after your check box group. Needless to say that you need to add dijit.form.CheckBox in your XPages resources as Dojo module.

You can also extend this technique to set dijit.form.RadioButton in radio button group.