Hi all. I seem to have broken a short JS snippet, and I can’t seem to figure out how. Please see comparewear.com
The script should be setting a maximum number of selections on the form.
Thank you!
<script>
jQuery(function(){
var max = 5;
var checkboxes = $('.products input[type="checkbox"]');
checkboxes.change(function() {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
</script>
If the selection is even slightly wrong, it wont be doing anything with your desired checkboxes.
As you can see from my test page above, the code is working perfectly well, so the code is working fine.
This means that the interaction with your HTML code might be at fault, where an adjustment to the selector or to your HTML will get things working for you.
Can we see a demo of the page that you’re wanting the code to work with?
When people click on the items, the checked state of the checkbox element is not being changed.
Only when the checkbox state is updated will that code work for you.
Hmm. That can’t be right, unless I’m missing something… If you submit the form, it submits just fine with the elements being checked. Why do you say the checked state is not being changed?
Because, when I open the developer tools and go to one of the checkboxes, with their properties dialog open, clicking on the on-screen item results in the pretty selected stuff being shown, but the checkbox property called “checked” does not change at all.
That is why I say that the checked state is not being changed. Time to explore further.
Ahh, when watching the properties and interacting with the page, the checked state does not change. It’s only when going back to look at the properties afterwards that they do change.