Limit checkbox selections

Limiting selections in the browser

To limit the number selections of a Checkbox add an HTML element to the form (from the “More” tab where you add elements) and enter this code as the content:

1
2
34
5
67
8
9
10
11
12
13

<script>
    jQuery(function ($) {
        var $checkboxes = $('.iphorm_1_1'); 
        $checkboxes.click(function () {
            if ($checkboxes.filter(':checked').length > 2) {                $(this).prop('checked', false);
                $.uniform.update();
                return false;
            }
        });
    });
</script>

<script>
    jQuery(function ($) {
        var $checkboxes = $('.iphorm_1_1');

        $checkboxes.click(function () {
            if ($checkboxes.filter(':checked').length > 2) {
                $(this).prop('checked', false);
                $.uniform.update();
                return false;
            }
        });
    });
</script>

• On line 3, replace iphorm_1_1 with the unique ID of the Checkbox element
• On line 6, replace the number 2 with the maximum number of selections allowed

Server-side validation

Using the above code it’s still possible for the form to be submitted with more than the allowed maximum number of selections, for example if JavaScript is disabled. You can prevent the form from being submitted and display a validation error if the form is submitted with more than the maximum number of selections by using a Custom validator. Add the following code to the wp-content/themes/YOUR_THEME/functions.php file (or create a plugin for it).

12
345
6
7
8
9
10

function iphorm_element_valid_iphorm_1_1($valid, $value, $element){
    if (is_array($value) && count($value) > 2) {        $element->addError('Only two choices are allowed');        $valid = false;
    }
 
    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'iphorm_element_valid_iphorm_1_1', 10, 3);

function iphorm_element_valid_iphorm_1_1($valid, $value, $element)
{
    if (is_array($value) && count($value) > 2) {
        $element->addError('Only two choices are allowed');
        $valid = false;
    }

    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'iphorm_element_valid_iphorm_1_1', 10, 3);

• On lines 1 and 10, replace the three occurrences of iphorm_1_1 with the unique ID of the Checkbox element
• On line 3, replace the number 2 with the maximum number of selections allowed
• On line 4, replace Only two choices are allowed with the error message to display more than the maximum number of selections are chosen when the form is submitted