Removing options from multi select based on one chosen already

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?

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:

Final preview:

Code preview

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

Hi Liam,

You can use this snippet to accomplish this:

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

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.