Removing options from multi select based on one chosen already

[user660bcd199bbfe152 (Liam Caulfield)]

I’m creating a registration form with some multi select fields where users would select their core skills and secondary skills from a list, they both use the same list for the skills. Is it possible to remove any skills that were selected in the first (core skills) field, for example if they chose PHP and HTML, those options would be dimmed or removed from the secondary skills field?

[faisalahammad]

Hi Liam,

First, add a unique CSS class to both checkbox fields from Appearance → Custom CSS Class. I’ve added “core-skills” and “secondary-skills” to my two checkboxes.

Now add the following code to the child theme’s JS file or use the “Simple Custom CSS and JS” plugin.

jQuery(document).ready(function ($) {
  $('.core-skills input[type="checkbox"], .secondary-skills input[type="checkbox"]').change(function () {
    var selectedCoreSkills = $('.core-skills input[type="checkbox"]:checked')
      .map(function () {
        return $(this).val();
      })
      .get();

    var selectedSecondarySkills = $('.secondary-skills input[type="checkbox"]:checked')
      .map(function () {
        return $(this).val();
      })
      .get();

    $('.core-skills input[type="checkbox"], .secondary-skills input[type="checkbox"]').prop("disabled", false);

    selectedCoreSkills.forEach(function (skill) {
      $('.secondary-skills input[type="checkbox"][value="' + skill + '"]').prop("disabled", true);
    });

    selectedSecondarySkills.forEach(function (skill) {
      $('.core-skills input[type="checkbox"][value="' + skill + '"]').prop("disabled", true);
    });
  });
});

Plugin settings:

Plugin:

Simple Custom CSS and JS

Final preview:

Note: Keep in mind that this validation will only work on the front end, not the back end.

[scott-the-sorceror (Scott (Gravity Wiz))]

Hi Liam,

You can use this snippet to accomplish this:

gravitywiz/snippet-library/blob/master/gravity-forms/gw-prevent-duplicate-selections.php

Once installed, add gw-prevent-duplicates to the CSS Class Name setting for any fields in which duplicate selections should be prevented.