Mutually exclusive checkbox- if you select option C, you can't select option A or option B

[howlingzoe]

Has anyone successfully had a mutually exclusive option in their checkbox list? (ie, if you select option C, you can’t select option A or option B, but if you select option A, you can select option B as well?). Use case is simple: consider you have a list of diseases and the last option is “none of the above”. If you select none of the above, it should deactivate all the other options. But so long as you didn’t check “none of the above”, you can choose as many diseases as you need to.

If so… how?

[faisalahammad]

Hi @howlingzoe
Yes, it is possible to create a mutually exclusive option in a checkbox list using Gravity Forms. Here is one way you can do it:

1. Create a checkbox field in your Gravity Form and add the options you want (e.g., option A, option B, option C, etc.).

2. Add a Custom CSS Class to the field. You can do this by going to the Advanced tab in the field settings and entering a class name in the Custom CSS Class field.

3. In your form’s Settings, go to the Custom CSS tab and add the following CSS code:

.custom-class input[type=checkbox] + label {
  cursor: pointer;
}

.custom-class input[type=checkbox]:checked + label {
  text-decoration: line-through;
}

.custom-class input[type=checkbox]:disabled + label {
  color: #ccc;
  cursor: not-allowed;
}

Replace “custom-class” with the CSS class you added to the field in step 2.

4. Add the following JavaScript code to your form’s Settings > Custom JavaScript tab:

jQuery(document).ready(function($) {
  $('.custom-class input[type=checkbox]').click(function() {
    if ($(this).val() == 'none of the above') {
      if ($(this).is(':checked')) {
        $('.custom-class input[type=checkbox]').not(this).prop('checked', false).prop('disabled', true);
      } else {
        $('.custom-class input[type=checkbox]').not(this).prop('disabled', false);
      }
    }
  });
});

Again, replace “custom-class” with the CSS class you added to the field in step 2.

This code will disable the other checkbox options when the “none of the above” option is selected and re-enable them when deselected.

I hope this helps! Let me know if you have any questions.