Gravity Forms: Conditionally Disable a Field

What You’ll Build

Gravity Forms conditional logic can show or hide fields. Sometimes you’d rather keep a field visible but disabled, so people can see the option exists but can’t pick it.

In this example, there are two radio button fields. Picking a certain choice in the first field disables the second field and clears its selection. It also works the other way around.

Requirements

• Gravity Forms (any license)
• Two Radio Buttons fields
• A place to add JavaScript, such as an HTML field on the form or a code snippet plugin like WPCodeBox

The Code

//Copy everything below this line

/**
*
* Conditionally Disable Radio Button Field
*
* This snippet disables a radio button field when a specific choice is selected in another radio button field.
* It will even clear the choice selection of the disabled field.
* See the link below for instructions.
*
* @Version: 1.0
* @Author:  Chris Eggleston
* @license: GPL-2.0+
* @link:    https://gravityranger.com/?p=33535
*
*/

<script>
jQuery(document).ready(function($){
    // Listen for changes on field 1
    $('fieldset#field_27_1 input[type="radio"]').change(function(){
        if($('fieldset#field_27_1 input[type="radio"]:checked').val() == '1'){
            // Disable field 4 and clear any selection if the specific value is selected in field 1
            $('fieldset#field_27_4 input').prop('disabled', true).prop('checked', false);
        } else {
            // Enable field 4 if the specific choice is not selected in field 1
            $('fieldset#field_27_4 input').prop('disabled', false);
        }
    });

    // Listen for changes on field 4
    $('fieldset#field_27_4 input[type="radio"]').change(function(){
        if($('fieldset#field_27_4 input[type="radio"]:checked').val() == '2'){
            // Disable field 1 and clear any selection if the specific value is selected in field 4
            $('fieldset#field_27_1 input').prop('disabled', true).prop('checked', false);
        } else {
            // Enable field 1 if the specific choice is not selected in field 4
            $('fieldset#field_27_1 input').prop('disabled', false);
        }
    });
});
</script>

How to Customize It

The snippet uses this example setup. Change each value to match your form:

The choice value is what’s saved, not the label. To see values, open the field’s choices and turn on Show Values.

Add It to Your Form

1. Copy the code from the gist.
2. Add an HTML field to your form and paste the code (including the <script> tags) into its Content setting. Or add it as a JavaScript snippet that loads on the page with the form.
3. Update the form and field IDs and choice values.
4. Preview the form and test both directions.

Things to Know

• Disabled fields aren’t submitted. If the disabled field is marked Required, the form won’t pass validation. Leave it optional, or use conditional logic to hide it instead.
• AJAX and multi-page forms: the code runs when the page loads. If your form reloads with AJAX or uses several pages, run it inside the gform_post_render event so it runs again after each render.
• Other field types: the same idea works for checkboxes. Change input[type="radio"] to input[type="checkbox"].

Need More Help?

If you still need help, use the chat or leave a comment below and we’ll get back to you.

Related Articles

• Gravity Forms: Submit Form When Radio Button is Selected
• How to set a minimum or maximum requirement for checkboxes in Gravity Forms