Exclude choices for checkbox field

[RichardH74]

Hi,

Is it possible to exclude or make non-selectable a checkbox value, based on another value being selected?

For example, I have a situation where we would like people to be able to choose 2 out of the 5 choices, A, B, C, D, and E, but they cannot choose A and B together. So, if they choose A, then B is not selectable and they can make their remaining choice from C, D and E only, etc.

I can use the Gravity Perk Mimit Checkboxes to limit the total choices to 2, but am not sure how, or if it is possible to make it so A and B can’t be selected together.

Is this possible with one checkbox filed, or are there other ways that I could achieve the same result?

Thank you,

[faisalahammad]

Hi Richard,

It is possible with a bit of jQuery code. Here is the preview.

First, navigate to the Checkbox Field Settings, then go to Appearance, and finally click on Custom CSS Class. Add the CSS class name “disable_b” in the provided field.

Then, install the Simple Custom CSS and JS plugin and insert the JS code there, following the instructions in the screen recording below. If you are using a child theme, you can add the following code to the JavaScript file.

Code:

jQuery(document).ready(function($) {
    $('.disable_b .gchoice input[value="A"]').change(function() {
      if ($(this).is(':checked')) {
        $('.disable_b .gchoice input[value="B"]').prop('disabled', true);
      } else {
        $('.disable_b .gchoice input[value="B"]').prop('disabled', false);
      }
    });

    $('.disable_b .gchoice input[value="B"]').change(function() {
      if ($(this).is(':checked')) {
        $('.disable_b .gchoice input[value="A"]').prop('disabled', true);
      } else {
        $('.disable_b .gchoice input[value="A"]').prop('disabled', false);
      }
    });
  });

Screen recording:

GF - Disable one field based on previous selection

Plugin:

Simple Custom CSS and JS

Give it a try, and let me know how that goes!