Single Checkbox - only check one at a time

Submitted by mistalla on Fri, 04/01/2011 - 20:52

I am creating a list from a table - have a check box to let the user select the row, and want to have user check just one at a time. I see that when you check a box, it lets you check another without unchecking the first one.
How can I have the previous box uncheck if you check a new box?

RE: Single Checkbox - only check one at a time

I had a similar requirement in my project.

- many multiple checkbox groups in a form.
- only one checkbox can be checked at a time in the a group.

What I did to meet the requirement is using javascript function with dojo library help which already included in WM forms.

#. Create a js file, and include it to your project in the application map.
#. Add a javascript function to handle onchange event.

e.g.


function setMultipleRejectionReasonsToggle(event) {

	if (event.srcElement) {
		event.target = event.srcElement; 
	}

	//Current checkbox
	var objCheckbox = event.target;

	//Get parent layout or table having all checkboxes.
	var objContainer = getParentContainer(objCheckbox.id);

	if (objCheckbox.checked) {

	    var queryString = "span#" + objContainer.id + " input[type='checkbox']";

		dojo.query(queryString).forEach( function(node, index, array){ 
			if (node.id != objCheckbox.id) {
				node.checked = false;
	        }
		})
	}
}

#. Add a new 'onchange' event to the multiple checkbox in the Field Detail tab.
#. Assign the javascript function to the onchange event (select custom script).

Hope this helps,
Taeho.BPM

RE: Single Checkbox - only check one at a time

Thanks for that script function Taeho, it looks very useful.

The only thing I would add is that in mistalla's case there is just a single checkbox in each row of the table, so they will not be within the same container.

Instead I would suggest adding a specific class (eg 'checkboxgroup') to each checkbox (by adding it to the Control (class) setting on the Field Details page in FormMaker), and then adjust the queryString value in Taeho's function. eg:


var queryString = "input.checkboxgroup";

Regards,
Gerard

(As an aside, when posting code fragments in the forum, if you specify the language in the code tag (eg [code=javascript]) then you should also get syntax highlighting.)

RE: Single Checkbox - only check one at a time

Thanks for that script function Taeho, it looks very useful.

The only thing I would add is that in mistalla's case there is just a single checkbox in each row of the table, so they will not be within the same container.

Instead I would suggest adding a specific class (eg 'checkboxgroup') to each checkbox (by adding it to the Control (class) setting on the Field Details page in FormMaker), and then adjust the queryString value in Taeho's function. eg:

var queryString = "input.checkboxgroup";

Regards,
Gerard

(As an aside, when posting code fragments in the forum, if you specify the language in the code tag (eg [code=javascript]) then you should also get syntax highlighting.)

Thansk to both of you!

I will try both ideas... in the meantime, I got lazy and hyperlinked the row selections instead of the checkbox... this way I avoided any extra code... LOL (I am very lazy)