“None of the Above” Checkbox
Use this snippet to enable a proper “None of the Above” option in your Checkbox fields. If any other option is checked, the “None of the Above” option will be disabled. If the “None of the Above” option is checked, all other options will be disabled.
Instructions
Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-code-chest/
Add a new choice to your Checkbox field to act as the “None of the Above” choice. This must be the last choice in the field.
Add “gw-none-of-the-above” to the Custom CSS Class field setting under the Appearance tab for any Checkbox field to which this should be applied.
Code
Filename: gw-none-of-the-above-checkbox.js
/**
* Gravity Wiz // Gravity Forms // "None of the Above" Checkbox
* https://gravitywiz.com/
*
* Instruction Video: https://www.loom.com/share/0f8de708790b4afd879bf0632efd7eae (Out of date)
*
* Use this snippet to enable a proper "None of the Above" option in your Checkbox fields. If any
* other option is checked, the "None of the Above" option will be disabled. If the "None of the Above"
* option is checked, all other options will be disabled.
*
* Instructions:
*
* 1. Install this snippet with our free Custom JavaScript plugin.
* https://gravitywiz.com/gravity-forms-code-chest/
*
* 2. Add a new choice to your Checkbox field to act as the "None of the Above" choice.
* This must be the last choice in the field.
*
* 3. Add "gw-none-of-the-above" to the Custom CSS Class field setting under the Appearance tab for
* any Checkbox field to which this should be applied.
*/
$( '.gw-none-of-the-above' ).each( function() {
var disableNota = false;
var $field = $( this );
var $last = $field.find( '.gchoice:last-child input' );
var $others = $field.find( 'input' ).not( $last );
// If "None of the Above" choice is checked by default.
if ( $last.prop( 'checked' ) ) {
var $checkboxes = $field.find( 'input' ).not( $last )
$checkboxes
.prop( 'checked', false )
.prop( 'disabled', true );
}
$last.on( 'click', function() {
var $checkboxes = $field.find( 'input' ).not( $( this ) )
if ( $( this ).is( ':checked' ) ) {
$checkboxes
.prop( 'checked', false )
.prop( 'disabled', true );
} else {
$checkboxes.prop( 'disabled', false );
}
} );
$others.on( 'click', function() {
if ( $others.filter( ':checked' ).length && disableNota ) {
$last.prop( 'disabled', true );
} else {
$last.prop( 'disabled', false );
}
} );
} );
Hey guys, about to use this for the first time for a checkbox field with 12 checkboxes. Is there a way that other checkboxes that might have already been selected, could automatically be un-selected if the “None of the Above” option is selected?
Hi Phil,
This will require customization to the snippet to get it working the way you want. Currently, the snippet works in such a way that, the None of the Above, choice is disabled when any choice is selected, and when the None of the Above choice is selected, all the other choices are disabled. I’ll forward your request as a feature request to our Product manager. We’ll reply to you via email with updates on your request.
Best,
Hey Samuel,
Thanks so much, I appreciate that.
Best, Phil
Hi Phil,
We have updated the snippet with the feature you requested. Please do give it a try.
Feel free to let us know if you have any questions or concerns.
Best,