Workflow and ServiceDesk Community

Original article is posted here.

A while ago I had a Workflow process, in which I used a form, on which I had a group of CheckBoxes.  The business process for the workflow demands that out of the 5 CheckBoxes, only one may be selected.

Utilizing the concept defined in this post, I made a change to the default function called when the CheckBox value changes.

Here’s the code for the body onload event to update the onchange function:

var cbArray = Panel1.getElementsByTagName('input');
 
for (i = 0; i < cbArray.length; i++) {
var eachCB = cbArray[i];
eachCB.parentNode.setAttribute('onchange','unCheckBox(this.firstElementChild.id)');
}

Where “Panel1” is the panel in which I’ve placed the mutually exclusive CheckBoxes.  Using “Panel1” in this way will ensure we do not affect any other CheckBoxes on the page.

Then, the function we’re splicing in (in the Script section):

function unCheckBox(compID){
var ckBoxes = Panel1.getElementsByTagName('input');
for (i = 0; i < ckBoxes.length; i++) {
var eachCB = ckBoxes[i];
if (eachCB.id != compID) { //exclude the clicked checkbox
eachCB.checked = false;
}
}
}

It’s important to note that CheckBox components are wrapped in a span wrapper, which is what actually receives the control ID that is assigned in the component configuration.  That means that we’ll need to occasionally go up or down a level with parentNode or firstElementChild in order to affect the level we need.

Here’s a demo with 3 CheckBoxes in our target panel, and another CheckBox outside of it.

Featured Components

CheckBox