Using jQuery to Impose an ACF Checkbox Limit

I love Advanced Custom Fields Pro. Recently, I encountered a project where I needed to restrict a client from being able to check more than 4 options within an ACF checkbox field within the admin. Once the 4th option was chosen, I wanted the rest of the checkboxes to be in a disabled state.

The way I accomplished this was using a PHP function and jQuery. After setting up the custom ACF checkbox field, I inspected the element to get the field class/name. It would look something like:

acf-field-XXXXXXXXXXXXX

Where the string of X’s is an alphanumeric code for the field where the ACF checkbox exists. Then, within my organized functions.php file, I dropped in a function tying into admin_print_scripts:

// limit ACF field
function klfadmin_inline_scripts() { ?>
<script>
jQuery(document).ready(function(){
jQuery('.acf-field-XXXXXXXXXXXXX input[type="checkbox"]').on('click', function() {
var checkboxfield = jQuery('.acf-field-XXXXXXXXXXXXX input[type="checkbox"]:checked').length >= 4; // change 4 to limit desired
jQuery('.acf-field-XXXXXXXXXXXXX input[type="checkbox"]').not(':checked').attr('disabled',checkboxfield);
});
});
</script>
<?php }
add_action('admin_print_scripts','klfadmin_inline_scripts', 20, 2);

Remember to sub in the proper ACF alphanumeric code from above in the three spots within the jQuery script. You can also easily change the limit by changing 4 to whatever number you need.

Initially, I had attempted to add the action at priority 10, but that was causing it to be loaded before jQuery had been called in the admin, which resulted in a jQuery not defined error. Moving the priority to 20 circumvented that issue.