/**
* 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/
*/
// Add all checkbox field IDs here
var checkboxGroups = [
'#input_GFFORMID_1',
'#input_GFFORMID_2',
'#input_GFFORMID_3',
'#input_GFFORMID_4'
];
// Exclusions map: key = value of checked checkbox, value = array of checkbox values to disable
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' ],
// Third Checkbox field exclusions.
'First Choice C': [ 'First Choice D', 'Second Choice D' ],
// Fourth Checkbox field exclusions.
'First Choice D': [ 'First Choice C' ],
'Second Choice D': [ 'First Choice C' ]
};
var $groups = $( checkboxGroups.join(',') );
$groups.on('change', 'input[type="checkbox"]', function() {
updateAllCheckboxes();
});
updateAllCheckboxes();
function updateAllCheckboxes() {
// Collect all checked values across all groups
var checkedValues = [];
$groups.each(function() {
$(this).find('input:checked:not(.gplc-disabled, .gwlc-disabled, .gpi-disabled)')
.each(function() {
checkedValues.push($(this).val());
});
});
// First reset everything
$groups.find('input[type="checkbox"]:not(.gplc-disabled, .gwlc-disabled, .gpi-disabled)')
.prop('disabled', false);
// Apply exclusions globally
$.each(exclusions, function(key, valuesToDisable) {
if ($.inArray(key, checkedValues) !== -1) {
$.each(valuesToDisable, function(index, targetValue) {
$groups.find('input[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!