JS Limit the Number of Checked Options in Checkbox Group

1.1 Problem description

When making a form, sometimes it is required to limit the maximum number of options selected in a checkbox group. For example, set the maximum as 2, and if more than 2 options are selected, all selected values will be cleared or only the part that is beyond the limitation will be cleared.

1.2 Implementation ideas

Get the value of the current cell through JS, and then use the length property to determine the number of selected options and perform operations.

2.1 Operation steps

Add a checkbox group in cell A1, and the data dictionary is customized as A, B, C and D, as shown below:

2.2 Clear all selected options

1) Add JS event

Add a State Change event to the checkbox group, as shown below:

The JS code is as follows:

var value = this.getValue(); //Get the value of the current widget
if(value.length>2){ //Determine whether the length of widget value exceeds 2
alert("length is "+value.length+", more than the maximun length 2!");
this.reset(); //Reset the data, that is, clear the selected options
}

Note: You can also use this.setValue(""); to clear the data.

2) View the effect

Click Data Entry Preview, check 3 options, and message "length is 3, more than the maximum length 2!" will pop up. After clicking OK, all the selected options are cleared.

2.3 Only clear the options that are beyond limitation

1) Modify the above JS

The JS code is modified to:

var value = this.getValue();
var oldvalue = contentPane.curLGP.getCellValue("A1")
if(value.length>2){
alert("length is "+value.length+", more than the maximun length 2!");
this.setValue(oldvalue);
}

2) View the effect

Click Data Entry Preview, select 3 options in the checkbox group, and message "length is 3, more than the maximum length 2!" will pop up. After clicking OK, only the third selected option is cleared.

2.4 Preview effect on mobile terminal

Clear all selected options:

Note: Clearing the options that are beyond the limitation is not applicable on mobile terminal.

Clear all options:

JS -chosen quantity limitation for checkbox Group.cpt

Empty the options that are beyond the limitation:

JS -chosen quantity limitation for checkbox Group 2.cpt