Limiting checks in checkboxes

The only way to do this is with javascript. It’s not too complicated, you can put the script into a custom template.

<script type="text/javascript">
jQuery(function($){
???var limit = 3;
   var field = 'interests';
???$('input[name^='+field+']').on('change', function(e) {
   ???if($(this).siblings(':checked').length >= limit) {
   ???    this.checked = false;
   ???}
???});
});
</script>

Set the limit value, and the field name to the field you want to limit.

Thanks, but I’m not sure where exactly to put the script… does it go on the signup page? It’s not actually on that page but the complete registration page which I don’t appear to have a template for?

Also you have ‘interests’ and ‘siblings’ in your example, do I change them both to my field name ‘commutable_areas’ or should they be different too?

Cheers, Em

It needs to go into a plugin template, so if the form you want that to operate on doesn’t use a custom template, you’ll need to set one up. In the template, you would paste that code in at the top, outside of the PHP tags. (i.e., after the “?>”)

The only two things you’ll need to change are the values of the two variables at the top of the code, “limit” and “field”, the rest you shouldn’t change.

Sorry, but this isn’t working. I’ve created a pdb-record-default.php template now and put the script at the top but it still allows more than 3 selections in the ‘commutable_areas’ field!

<script type="text/javascript">
jQuery(function($){
???var limit = 3;
   var field = 'commutable_areas';
???$('input[name^='+field+']').on('change', function(e) {
   ???if($(this).siblings(':checked').length >= limit) {
   ???    this.checked = false;
   ???}
???});
});
</script>

yes, well, this is why I don’t usually post this kind of thing…even though the code is correct in theory, it’s hard to know exactly how it will behave on someone’s page! I’ll have to see it in action to comment more constructively.

Looks like in the context of the checkboxes, because the checkboxes are wrapped in label tags, the script needs to be:

<script type="text/javascript">
jQuery(function($){
   var limit = 3;
   var field = 'commutable_areas';
      $('input[name^='+field+']').on('change', function(e) {
         if($(this).closest('.checkbox-group').find(':checked').length > limit) {
            this.checked = false;
         }
      });
});
</script>

Appreciate you trying to help as always, but unfortunately it doesn’t seem to do anything ??

Cheers anyway x

I tested it and it was working yesterday, I’ll have another look.