How to limit the number of selected checkboxes?

Ask the community
,
1

I have 34 checkboxes(#checkbox0 - #checkbox33) and a requirement that a user can select maximum of 3 checkboxes.
I have the following code but it doesn’t work;

$w.onReady(function() {
let checkboxes = "";
let checkboxesArr = [];
let uncheckedboxesArr = [];
for(let i = 0; i < 34 ; i ++){
 checkboxes += "#checkbox" + i + ", ";
 checkboxesArr[i] = "checkbox" + i;
}
$w(checkboxes).onChange((event) => {
  uncheckedboxesArr = [];
 let checkedNumber = 0;
 for(let i = 0; i < 34 ; i ++){
    checkedNumber +=  $w("#" + checkboxesArr[i]).checked
 if (!$w("#" + checkboxesArr[i]).checked){
    uncheckedboxesArr.push(checkboxesArr[i]);
    }
  }
 
 if(checkedNumber === 3) {
 for(let i = 0; i < uncheckedboxesArr.length; i++){
      $w("#" + uncheckedboxesArr[i]).disabled;
    }
  } else {
 for(let i = 0; i < uncheckedboxesArr.length; i++){
      $w("#" + uncheckedboxesArr[i]).enabled;
    }
  }
})
})
2

Try this way…

$w.onReady(function() {
    let checkedBoxes = [];

    $w('Checkbox').onChange((event) => {
        checkedBoxes.push(event.target.id)
        console.log("Selected-CheckBoxes: ", checkedBoxes)
        console.log("Number of Checked-Boxes: ", checkedBoxes.length)

        if(checkedBoxes.length>=3) { 
            $w('#'+event.target.id).checked = true;
        }   
    });
});
3

Thank you for your reply, but the code doesn’t work.
After one of the checkboxes is checked, the rest checkboxes are checked at the same time.
When 3 checkboxes are checked, I’d like to disable the rest checkboxes.

4

Ok, sorry. Then try this one, this should do it…

let checkedBoxes = []
let checkBoxAmount = 1 //here you can set the amount/number of accessible CheckBox-Values

$w.onReady(function() {
    $w('Checkbox').onChange((event) => {console.log(event.target.id)   
         const index = checkedBoxes.indexOf(event.target.id);
 
         if (index === -1) {console.log("Item not existing yet")
             if(checkedBoxes.length<checkBoxAmount) { 
                checkedBoxes.push(event.target.id)
             }
             else{$w('#'+event.target.id).checked = false;}
         }
         else{console.log("Item already existing")
            checkedBoxes.splice(index, 1)
         }
     });
});
5

@russian-dima
Thank you very much. The code works!!!:heart_eyes:

6

@info55535 No Problem. :wink:
Good luck & happy coding.

7

@info55535 ATTENTION ! You have selected the wrong Answer as → Best-Answer !