JS Limit Checkbox (Parameter Panel) to Select the Number

1.1 Problem description

For some special query templates, if there are too many options for drop-down check boxes, the query results may be too large, and the page display effect may be not ideal, so it is sometimes necessary to limit the number of check box groups selected. For example, the number of selectable check boxes is limited to 5, and if there are more than 5 check boxes, extra check boxes cannot be selected. Let's introduce the production method below.

For example: If apple juice, milk, tomato sauce, salt and sesame oil have been selected, when you want to check soy sauce, you can't select it and a prompt box will pop up showing [You can only select 5 at most!].

1.2 Implementation ideas

Get the value of the current widget through JavaScript, and then judge the number of selected check boxes and perform operations.

2.1 Operation steps

Add a click event to the check box group widget, as shown below:

The code is as follows:

var Num = 0;
$.each(this.ck_el_array, function(i, item) {
    if(item.isSelected()) {
        Num++;
    }
    if(Num > 5) {
        FR.Msg.toast("At most choose 5 items");
        item.setSelected(false);
    }
});

Note: Currently, this method only supports selecting options in positive sequence. If you select in negative sequence, when there are more than 5 options, the first option will be unchecked while the current option will be checked.

2.2. Preview

Save the report and click Pagination Preview. The report effect is as shown below:

Note: Mobile terminal is not supported.

Note: Save the template, click Pagination Preview, and only 5 check boxes can be selected at most, otherwise the above dialog box will pop up.

Click Download Template:

JS_limit_checkbox_quantity.cpt

https://help.fanruan.com/finereport/doc-view-1727.html