/**
* Gravity Wiz // Gravity Forms // Conditionally Disable Checkboxes
* https://gravitywiz.com/
*
* Disable checkboxes in one Checkbox field depending on the values checked in another.
*
* Instructions:
*
* 1. Watch this video:
* https://www.loom.com/share/b3ebfdc6b6b2440f917e3b431c615e21
*
* 2. Install this snippet with our free Custom JavaScript plugin.
* https://gravitywiz.com/gravity-forms-code-chest/
*/
// Update "1" to your first Checkbox field's ID.
var $cbs1 = $( '#input_GFFORMID_1' );
// Update "2" to your second Checkbox field's ID.
var $cbs2 = $( '#input_GFFORMID_2' );
// See video above for instructions on editing exclusions.
// Note: This uses the choice value not the choice label. When targeting Product Option fields configured as a checkbox, you must include the price (e.g. 'First Choice B|15').
var exclusions = {
// First Checkbox field exclusions.
'First Choice A': [ 'First Choice B' ],
'Second Choice A': [ 'Second Choice B' ],
'Third Choice A': [ 'Third Choice B', 'Fourth Choice B', 'Fifth Choice B' ],
// Second Checkbox field exclusions.
'First Choice B': [ 'First Choice A' ],
'Second Choice B': [ 'Second Choice A' ],
'Third Choice B': [ 'Third Choice A' ],
'Fourth Choice B': [ 'Third Choice A' ],
'Fifth Choice B': [ 'Third Choice A' ],
};
$cbs1.on( 'change', function() {
gwDisableCheckboxes( $cbs1, $cbs2, exclusions )
} );
$cbs2.on( 'change', function() {
gwDisableCheckboxes( $cbs2, $cbs1, exclusions )
} );
function gwDisableCheckboxes( $triggerField, $targetField, exclusions ) {
var checkedValues = [];
$.each( $triggerField.find( 'input:checked:not( .gplc-disabled, .gwlc-disabled, .gpi-disabled )' ), function() {
checkedValues.push( $(this).val() );
} );
var $targetCheckboxes = $targetField.find( 'input[type="checkbox"]:not( .gplc-disabled, .gwlc-disabled, .gpi-disabled )' );
$targetCheckboxes.prop( 'disabled', false );
for ( const [ key, value ] of Object.entries( exclusions ) ) {
if ( $.inArray( key, checkedValues ) !== -1 ) {
for ( const targetValue of value ) {
$targetCheckboxes.filter( '[value="' + targetValue + '"]' )
.prop( 'checked', false )
.prop( 'disabled', true );
}
}
}
}
Hello, question, is there a way to do this with a dropdown list field ? And if I have multiple pair of check boxes, how do I modify this snippet ? I want to provide 2 options for the same activity. So Bloc A has two dropdown list, options from A1 to A9. One is the first option, and the second is the second option. So for bloc A if A1 is selected I want to disable A1 in the second drop down. I have the same to do from Bloc A to Bloc F. Thanks
Hi Mauricio,
This snippet would need to be modified to support multiple checkbox groups.
We do have another snippet that prevents duplicate selections in dropdown fields, which may be better suited to your use case. However, it currently applies to a single group of dropdown fields, so it would also need to be adjusted to work with multiple pairs.
We’ll follow up with you via email so we can help further customize the snippets for your specific requirements.
Best,
Is there a way to make this work within a single question… for example, choosing C disables options A & B?
Hey Will,
This snippet is designed for use with two Checkbox fields, but based on what you’re describing, I imagine that using a different field type (e.g., Multiple Choice) might be able to solve what you’re looking for. Within a single field for your question, if only one selection is allowed, then choosing C would by nature make A and B not selectable (at the same time).
If you’re still having no luck, please send us over a form export via Support, and we would be happy to take a closer look here!