Restrict the selection to three checkboxes

RohanDS
Tera Contributor

‎08-08-2024 02:13 PM

Hello All,

 

I have a situation where the user can select only up to 3 check boxes as shown below.

RohanDS_0-1723151044297.png

However, I wrote an onChange script for all the four checkboxes as follows:

 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    var count = 0;
    var arr = ['data_collection', 'report_generation', 'email_tracking','other']; //here give your checbox variable names
    for (var i = 0; i < arr.length; i++) {  //get the count of the true checkboxes
        if (g_form.getBooleanValue(arr[i]) == true)
            count++;
    }
    if (count == 3) {  //if two checkboxes are checked then make readonly for rest of the checkboxes
        for (var j = 0; j < arr.length; j++) {
            if (g_form.getBooleanValue(arr[j]) != true)
                g_form.setReadOnly(arr[j], true);
        }
    } else {  //if not make editable..
        for (var k = 0; k < arr.length; k++) {
            if (g_form.getBooleanValue(arr[k]) != true)
                g_form.setReadOnly(arr[k], false);
        }
    }
}

This is working exactly the way it should be but the issue is if I select 3 options and click on the fourth one, it just locks away the selected options and if I want to unselect a checked option and select another one, that's when it is not allowing me to do so. I have to refresh my page and start over again. Does anybody knows how to fix this?

RohanDS_1-1723151297626.png

If I unselect everything, the option I tried to select becomes read only.

RohanDS_2-1723151471231.png

 

 

 

0 Helpfuls
  • 664 Views
6 REPLIES 6

Brad Bowman
Kilo Patron
Kilo Patron

‎08-08-2024 02:44 PM - edited ‎08-09-2024 03:30 AM

Very close, just remove one line of code -  the last if statement and it will work as intended. Tested and working in a mockup in my PDI

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var count = 0;
    var arr = ['monday', 'tuesday', 'wednesday','thursday']; //here give your checbox variable names
    for (var i = 0; i < arr.length; i++) {  //get the count of the true checkboxes
        if (g_form.getBooleanValue(arr[i]) == true)
            count++;
    }
    if (count == 3) {  //if three checkboxes are checked then make readonly for rest of the checkboxes
        for (var j = 0; j < arr.length; j++) {
            if (g_form.getBooleanValue(arr[j]) != true)
                g_form.setReadOnly(arr[j], true);
        }
    } else {  //if not make editable..
        for (var k = 0; k < arr.length; k++) {
			g_form.setReadOnly(arr[k], false);
        }
    }
}

 

0 Helpfuls

Sheldon  Swift
ServiceNow Employee
ServiceNow Employee

‎08-08-2024 07:45 PM

To fix this issue, you need to slightly modify the logic:

 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var count = 0;
    var arr = ['data_collection', 'report_generation', 'email_tracking', 'other']; // Add your checkbox variable names here

    // Count the number of checkboxes that are currently checked
    for (var i = 0; i < arr.length; i++) {
        if (g_form.getBooleanValue(arr[i]) == true) {
            count++;
        }
    }

    // If three checkboxes are selected
    if (count >= 3) {
        // Disable unchecked checkboxes, but keep selected checkboxes editable
        for (var j = 0; j < arr.length; j++) {
            if (g_form.getBooleanValue(arr[j]) != true) {
                g_form.setReadOnly(arr[j], true);
            } else {
                g_form.setReadOnly(arr[j], false); // Ensure selected checkboxes can still be deselected
            }
        }
    } else {
        // If less than three checkboxes are selected, make all checkboxes editable
        for (var k = 0; k < arr.length; k++) {
            g_form.setReadOnly(arr[k], false);
        }
    }
}

 

 

0 Helpfuls