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.
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
}
})
})
@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.
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
}
})
});
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?
@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.
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:-
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?
If the selection is made till 6 then further selection should not be allowed as in the rest of the checkboxes should become unclickable.
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
}
})
});