Alegria
(Alegria)
August 9, 2020, 4:16pm
1
Hi,
I have a form with checkboxes, and I’d like people to be able to check only 3 checkboxes, not all of them.
I figured javascript was needed for that and I found this code that I adapted with my classes
<script>
$('.checkboxmetiers').on('change', function() {
if($('.checkboxmetiers:checked').length > 3) {
this.checked = false;
}
});
</script>
I also added the right class to my input (I tried to put in on the checkbox, on the name, the two of them) but the script doesn’t work.
Could anyone help?
Thanks!
1 Like
Got a link to your published site page?
This should help you out. I have also added a visual cue to let your user know that they cant select more than 3 boxes;
<script>
$(document).ready(function(){
var $checkboxWrapper = $('div.checkboxmetiers');
$checkboxWrapper.find('input[type=checkbox]').on('change', function() {
if( $checkboxWrapper.find('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false).change();
}
if( $checkboxWrapper.find('input[type=checkbox]:checked').length === 3) {
$checkboxWrapper.find('input[type=checkbox]:not(:checked)').closest('label').css({'opacity': '0.5', 'pointer-events' : 'none'})
} else {
$checkboxWrapper.find('label').css({'opacity': '', 'pointer-events' : ''})
}
});
})
</script>
1 Like
Alegria
(Alegria)
August 10, 2020, 5:17pm
4
Oh my, it works delightfully! Thank you so much!
@Alegria
Very welcome. Glad it helped.
Hi @AlexManyeki !
Just wanted to take some time to thank you for the script! I had the same issue and it helped a lot!
Nico
That’s great @Nicolas_C1 .
All the best with your project.
Tene_Lisi
(Tene & Lisi)
March 24, 2021, 10:55am
8
Hey @Tene_Lisi
You will need to replace the checkbox wrapper’s class with your own. So replace this line;
v̶a̶r̶ ̶$̶c̶h̶e̶c̶k̶b̶o̶x̶W̶r̶a̶p̶p̶e̶r̶ ̶=̶ ̶$̶(̶'̶d̶i̶v̶.̶c̶h̶e̶c̶k̶b̶o̶x̶m̶e̶t̶i̶e̶r̶s̶'̶)̶;̶
with
var $checkboxWrapper = $('div.form-item-wrapper');
Tene_Lisi
(Tene & Lisi)
March 24, 2021, 11:16am
10
Working great, I thought at first that it’s need to be on the checkbox class.
Thanks a lot! also for your fast respond
2 Likes
PHRyan
(Ryan Deshaies)
January 31, 2022, 11:55pm
12
Hello,
The functionality of this is working but when the form is submitted it is only returning “false” as a single option for the checkbox instead of returning the 2 selected choices in the email.
Screenshot of form submission email:
Here is my read-only link
Any help would be greatly appreciated!
Thank you.