Mutually exclusive checkboxes

[user5c614cc3b28f91.9 (Alex Abrams)]

I’m trying to implement the ‘None of the above’ checkbox solution:

None of the Above Checkbox [RESOLVED]

Is there a way to achieve this below: When “none of the above” is checked: all the other options become unchecked and disabled. When “none of the above” is unchecked: all the other options become enabled again. [checkbox] See example below: https://austinpray.com/javascript/2015/02/14/jquery-none-of-the-above-checkboxes.html Thank you in advance.

I first tried add the javascript using a ‘Header, Footer plugin’ but the didn’t work.

I then tried putting the javascript into a file called ‘uncheckoptions.js’ and placing it in a /js/ folder under my own bespoke plugin (portal-customiser) which I’ve been using to manage all my bespoke logic. I then added the following code to my portal-customiser.php file but it still didn’t work:

function my_scripts() {
wp_enqueue_script( ‘my-script’, get_template_directory_uri() . ‘/js/uncheckoptions.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts’ );

Finally, I’ve tried to add the javascript inline with my portal-customiser.php file and that didn’t work either:

function add_custom_javascript() {
?>

$(document).ready(function() {
$(‘.gfield-choice-input[value=“none”]’).on(‘change’, function() {
if ( $(this).is(‘:checked’) ) {
$(this).parent().siblings().find(‘.gfield-choice-input’).each( function() {
this.checked = false;
});
}
});

  $('.gfield-choice-input:not([value="none"])').on('change', function() {
      if ( $(this).is(':checked') ) {
          $(this).parent().siblings().find('.gfield-choice-input[value="none"]').prop('checked',false);
      }
  });
});
</script>

<?php } add_action('wp_head', 'add_custom_javascript'); I could really use your help because the form I'm creating which include multiple checkboxes, will not impress my client if then can select all checkboxes including the 'none' option. Regards, Alex

[sllbakkbone (Scott @ BAKKBONE Australia)]

See here for a free plugin that will insert the code as needed, or, to quote the article on that page:

The easiest method to include custom JavaScript in your forms is to include them in an HTML Field on the form, wrapped in <script> tags.

Keep in mind this approach is less effective for AJAX-enabled forms.