Setting a limit to checkboxes

Discussion Ask a question
,
1

Hi there,

I am currently working on my own Wix site for my start up company. I have very limited knowledge of coding and need assistance to streamline my user input process as much as possible. Eager to learn.

I have created a form that has a set of 10 checkboxes. I need to ensure that the user has to check 7 checkboxes out of the 10, not any more or any less.

Your assistance would be much appreciated.

Nae

2

You can use “checked” to see if a checkbox is checked or not.
https://www.wix.com/corvid/reference/draft/$w.Checkbox.html#checked
For example, let’s name each checkbox as checkbox0, checkbox1…checkbox9 (do it on the property panel).
Then you can use code like the following:

$w.onReady(function() {
let checboxesString = "";
let validation;
let checkboxesArr = [];
for(let i = 0; i < 10 ; i ++){
 checboxesString += "#checkbox" + i + ", ";
 checkboxesArr[i] = "checkbox" + i;
}
checboxesString = checboxesString.substring(0, checboxesString.length - 1);
$w(checboxesString ).onChange((event) => {
 let checkedNumber = 0;
 for(let i = 0; i < 10 ; i ++){
  checkedNumber +=  $w("#" + checkboxesArr[i]).checked// true value = 1, false value = 0;
 }
 console.log(checkedNumber);
 if(checkedNumber === 7) {
  validation = true;
 //code
 } else {
  validation = false;
 //code
  }
})
})
3

I’ve just noticed I had a mistake. Updated.

4

P.S. and of course, you can skip the loops and write one by one:

$w("#checkbox1, #checkbox2,......").onChange((event) => {
let checkNumber += $w("#checkbox1").checked + $w("#checkbox2").checked + ....
if(checkNumber === 7){
//code
} else {
//code
}
})
1 Like
5

Hi there

Thank you so much for being so helpful! This may be a stupid question but where in the code would i put this?

Kindest regards,

6

@naefouche23 inside the onReady(). Make sure you use the correct property names.
Another way to do it is to group the checkboxes together and then use the onChange on the children.
But let’s try first the above code.

7

@jonatandor35

717×150 4.1 KB

8

@naefouche23 Delete the space between the + and the =
Make it +=

9

But if you use a multiple choices checkbox element, you can do it much shorter:

$w.onReady(function () {
$w("#checkboxGroup1").onChange((event) => {
 if($w("#checkboxGroup1").value.length === 7){
 //put here code what do if it's 7
    } else {
 //put here code what to do if it's not 7
}
    })
});

That’s all. No need to calculate anything.

10

@jonatandor35

703×94 1.61 KB

Hi there,

I know that I’ve been a nuisance. Thank you so much for everything that you have done! I notice that you leave space to enable and disable the submit button if true or false. What coding would i need in order to do that successfully?

11

@naefouche23 I don’t know what option you chose (I put 3 alternatives options in this thread).
Anyway this error means there a mistake, probably some missing parentheses. Count them and see.
As for your last question, you can add $w(“#submitButton”).disable(); You can also show a notification that explains what the user has to do.

12

@jonatandor35 I am using the first option in the thread the longer coding

13

@jonatandor35 Last time i promise

14

@naefouche23 I’ve amended it a little bit. (There was a mistake in the substring() method.
Have a look above.

15

and in your code, you’re missing the }) of the onReady function, at the end of the code,

16

@jonatandor35 When i run it and check any checkbox it pulls up saying that it is “not a number”.

1272×161 3.58 KB

17

@naefouche23 make sure you’re using the first code exactly as appears above (I’ve fixed it a little bit after the first time I posted it)
You can see here that it’s working:
https://jonatandor35.wixsite.com/test/checkboxes

18

Hello,
My query is similar regarding putting limit to the number of checkboxes selected and I tried the solution given for ’ multiple choices checkbox element’ and it worked. But I want to take it further and want more conditions like:-

  1. I don’t want my length to be just ===7 but I want " >2 and <7". So how to add two conditions in single if statement?
  2. If the selection is made till 6 then further selection should not be allowed as in the rest of the checkboxes should become unclickable.
19

I don’t think you can disable some of the choices in a checkbox group. So you’ll have to use separate check-boxes for that.
Alternatively, you can use a checkbox group and instead of disabling the options, just cancel the additional checks. Something like this:

let selectedIndices;
$w.onReady(function () {
$w("#checkboxGroup1").onChange((event) => {
 if($w("#checkboxGroup1").value.length < 2){
 //add a notification for the user
    } else if($w("#checkboxGroup1").value.length === 6){
 selectedIndices = $w("#checkboxGroup1").selectedIndices;
} else if($w("#checkboxGroup1").value.length > 6){
    $w("#checkboxGroup1").selectedIndices = selectedIndices;
 //add a notification for the user
}
    })
});
20

How can I have condition like:-
if ( $w(‘#checkboxGroup1’).value.length > 2 and $w(‘#checkboxGroup1’).value.length <5){
//some notification
}
??