根据第一个下拉菜单的另一个选定复选框，禁用下拉菜单中的多个复选框

Question

根据第一个下拉菜单中的另一个选定复选框，禁用下拉菜单中的多个复选框 我有3个下拉菜单。这三个下拉菜单均具有相同的值。我想根据选择的第一个值禁用第二个和第三个下拉值。这意味着，当用户在第一个下拉菜单中选择了两个选项时，在第一个下拉菜单中包含那些选择的值的复选框应在第二个下拉菜单和第三个下拉菜单中被禁用，并且当用户在第二个下拉菜单中选择了三个选项时-down，包含第一个下拉菜单和第二个下拉列表中的选定值的复选框应在第三个下拉列表中禁用。

优先级分别是“优先级”下拉列表而不是第二和第三优先级。

(function($) {

  $.fn.fSelect = function(options) {

    if ('string' === typeof options) {
      var settings = options;
    } else {
      var settings = $.extend({
        placeholder: 'Select some options',
        numDisplayed: 3,
        overflowText: '{n} selected',
        searchText: 'Search',
        showSearch: true,
        optionFormatter: false
      }, options);
    }


    /**
     * Constructor
     */
    function fSelect(select, settings) {
      this.$select = $(select);
      this.settings = settings;
      this.create();
    }


    /**
     * Prototype class
     */
    fSelect.prototype = {
      create: function() {
        this.settings.multiple = this.$select.is('[multiple]');
        var multiple = this.settings.multiple ? ' multiple' : '';
        this.$select.wrap('<div class="fs-wrap' + multiple + '" tabindex="0" />');
        this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');
        this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');
        this.$select.addClass('hidden');
        this.$wrap = this.$select.closest('.fs-wrap');
        this.$wrap.data('id', window.fSelect.num_items);
        window.fSelect.num_items++;
        this.reload();
      },

      reload: function() {
        if (this.settings.showSearch) {
          var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';
          this.$wrap.find('.fs-dropdown').prepend(search);
        }
        this.idx = 0;
        this.optgroup = 0;
        this.selected = [].concat(this.$select.val()); // force an array
        var choices = this.buildOptions(this.$select);
        this.$wrap.find('.fs-options').html(choices);
        this.reloadDropdownLabel();
      },

      destroy: function() {
        this.$wrap.find('.fs-label-wrap').remove();
        this.$wrap.find('.fs-dropdown').remove();
        this.$select.unwrap().removeClass('hidden');
      },

      buildOptions: function($element) {
        var $this = this;

        var choices = '';
        $element.children().each(function(i, el) {
          var $el = $(el);

          if ('optgroup' == $el.prop('nodeName').toLowerCase()) {
            choices += '<div class="fs-optgroup-label" data-group="' + $this.optgroup + '">' + $el.prop('label') + '</div>';
            choices += $this.buildOptions($el);
            $this.optgroup++;
          } else {
            var val = $el.prop('value');

            // exclude the first option in multi-select mode
            if (0 < $this.idx || '' != val || !$this.settings.multiple) {
              var disabled = $el.is(':disabled') ? ' disabled' : '';
              var selected = -1 < $.inArray(val, $this.selected) ? ' selected' : '';
              var group = ' g' + $this.optgroup;
              var row = '<div class="fs-option' + selected + disabled + group + '" data-value="' + val + '" data-index="' + $this.idx + '"><span class="fs-checkbox"><i></i></span><div class="fs-option-label">' + $el.html() + '</div></div>';

              if ('function' === typeof $this.settings.optionFormatter) {
                row = $this.settings.optionFormatter(row);
              }

              choices += row;
              $this.idx++;
            }
          }
        });

        return choices;
      },

      reloadDropdownLabel: function() {
        var settings = this.settings;
        var labelText = [];

        this.$wrap.find('.fs-option.selected').each(function(i, el) {
          labelText.push($(el).find('.fs-option-label').text());
        });

        if (labelText.length < 1) {
          labelText = settings.placeholder;
        } else if (labelText.length > settings.numDisplayed) {
          labelText = settings.overflowText.replace('{n}', labelText.length);
        } else {
          labelText = labelText.join(', ');
        }

        this.$wrap.find('.fs-label').html(labelText);
        this.$wrap.toggleClass('fs-default', labelText === settings.placeholder);
        this.$select.change();
      }
    }


    /**
     * Loop through each matching element
     */
    return this.each(function() {
      var data = $(this).data('fSelect');

      if (!data) {
        data = new fSelect(this, settings);
        $(this).data('fSelect', data);
      }

      if ('string' === typeof settings) {
        data[settings]();
      }
    });
  }


  /**
   * Events
   */
  window.fSelect = {
    'num_items': 0,
    'active_id': null,
    'active_el': null,
    'last_choice': null,
    'idx': -1
  };

  $(document).on('click', '.fs-option:not(.hidden, .disabled)', function(e) {
    var $wrap = $(this).closest('.fs-wrap');
    var do_close = false;

    if ($wrap.hasClass('multiple')) {
      var selected = [];

      // shift + click support
      if (e.shiftKey && null != window.fSelect.last_choice) {
        var current_choice = parseInt($(this).attr('data-index'));
        var addOrRemove = !$(this).hasClass('selected');
        var min = Math.min(window.fSelect.last_choice, current_choice);
        var max = Math.max(window.fSelect.last_choice, current_choice);

        for (i = min; i <= max; i++) {
          $wrap.find('.fs-option[data-index=' + i + ']')
            .not('.hidden, .disabled')
            .each(function() {
              $(this).toggleClass('selected', addOrRemove);
            });
        }
      } else {
        window.fSelect.last_choice = parseInt($(this).attr('data-index'));
        $(this).toggleClass('selected');
      }

      $wrap.find('.fs-option.selected').each(function(i, el) {
        selected.push($(el).attr('data-value'));
      });
    } else {
      var selected = $(this).attr('data-value');
      $wrap.find('.fs-option').removeClass('selected');
      $(this).addClass('selected');
      do_close = true;
    }

    $wrap.find('select').val(selected);
    $wrap.find('select').fSelect('reloadDropdownLabel');

    // fire an event
    $(document).trigger('fs:changed', $wrap);

    if (do_close) {
      closeDropdown($wrap);
    }
  });

  $(document).on('keyup', '.fs-search input', function(e) {
    if (40 == e.which) { // down
      $(this).blur();
      return;
    }

    var $wrap = $(this).closest('.fs-wrap');
    var matchOperators = /[|\\{}()[\]^$+*?.]/g;
    var keywords = $(this).val().replace(matchOperators, '\\$&');

    $wrap.find('.fs-option, .fs-optgroup-label').removeClass('hidden');

    if ('' != keywords) {
      $wrap.find('.fs-option').each(function() {
        var regex = new RegExp(keywords, 'gi');
        if (null === $(this).find('.fs-option-label').text().match(regex)) {
          $(this).addClass('hidden');
        }
      });

      $wrap.find('.fs-optgroup-label').each(function() {
        var group = $(this).attr('data-group');
        var num_visible = $(this).closest('.fs-options').find('.fs-option.g' + group + ':not(.hidden)').length;
        if (num_visible < 1) {
          $(this).addClass('hidden');
        }
      });
    }

    setIndexes($wrap);
  });

  $(document).on('click', function(e) {
    var $el = $(e.target);
    var $wrap = $el.closest('.fs-wrap');

    if (0 < $wrap.length) {

      // user clicked another fSelect box
      if ($wrap.data('id') !== window.fSelect.active_id) {
        closeDropdown();
      }

      // fSelect box was toggled
      if ($el.hasClass('fs-label') || $el.hasClass('fs-arrow')) {
        var is_hidden = $wrap.find('.fs-dropdown').hasClass('hidden');

        if (is_hidden) {
          openDropdown($wrap);
        } else {
          closeDropdown($wrap);
        }
      }
    }
    // clicked outside, close all fSelect boxes
    else {
      closeDropdown();
    }
  });

  $(document).on('keydown', function(e) {
    var $wrap = window.fSelect.active_el;
    var $target = $(e.target);

    // toggle the dropdown on space
    if ($target.hasClass('fs-wrap')) {
      if (32 == e.which) {
        $target.find('.fs-label').trigger('click');
        return;
      }
    }
    // preserve spaces during search
    else if (0 < $target.closest('.fs-search').length) {
      if (32 == e.which) {
        return;
      }
    } else if (null === $wrap) {
      return;
    }

    if (38 == e.which) { // up
      e.preventDefault();

      $wrap.find('.fs-option.hl').removeClass('hl');

      var $current = $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']');
      var $prev = $current.prevAll('.fs-option:not(.hidden, .disabled)');

      if ($prev.length > 0) {
        window.fSelect.idx = parseInt($prev.attr('data-index'));
        $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']').addClass('hl');
        setScroll($wrap);
      } else {
        window.fSelect.idx = -1;
        $wrap.find('.fs-search input').focus();
      }
    } else if (40 == e.which) { // down
      e.preventDefault();

      var $current = $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']');
      if ($current.length < 1) {
        var $next = $wrap.find('.fs-option:not(.hidden, .disabled):first');
      } else {
        var $next = $current.nextAll('.fs-option:not(.hidden, .disabled)');
      }

      if ($next.length > 0) {
        window.fSelect.idx = parseInt($next.attr('data-index'));
        $wrap.find('.fs-option.hl').removeClass('hl');
        $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']').addClass('hl');
        setScroll($wrap);
      }
    } else if (32 == e.which || 13 == e.which) { // space, enter
      e.preventDefault();

      $wrap.find('.fs-option.hl').click();
    } else if (27 == e.which) { // esc
      closeDropdown($wrap);
    }
  });

  function setIndexes($wrap) {
    $wrap.find('.fs-option.hl').removeClass('hl');
    $wrap.find('.fs-search input').focus();
    window.fSelect.idx = -1;
  }

  function setScroll($wrap) {
    var $container = $wrap.find('.fs-options');
    var $selected = $wrap.find('.fs-option.hl');

    var itemMin = $selected.offset().top + $container.scrollTop();
    var itemMax = itemMin + $selected.outerHeight();
    var containerMin = $container.offset().top + $container.scrollTop();
    var containerMax = containerMin + $container.outerHeight();

    if (itemMax > containerMax) { // scroll down
      var to = $container.scrollTop() + itemMax - containerMax;
      $container.scrollTop(to);
    } else if (itemMin < containerMin) { // scroll up
      var to = $container.scrollTop() - containerMin - itemMin;
      $container.scrollTop(to);
    }
  }

  function openDropdown($wrap) {
    window.fSelect.active_el = $wrap;
    window.fSelect.active_id = $wrap.data('id');
    window.fSelect.initial_values = $wrap.find('select').val();
    $wrap.find('.fs-dropdown').removeClass('hidden');
    $wrap.addClass('fs-open');
    setIndexes($wrap);
  }

  function closeDropdown($wrap) {
    if ('undefined' == typeof $wrap && null != window.fSelect.active_el) {
      $wrap = window.fSelect.active_el;
    }
    if ('undefined' !== typeof $wrap) {
      // only trigger if the values have changed
      var initial_values = window.fSelect.initial_values;
      var current_values = $wrap.find('select').val();
      if (JSON.stringify(initial_values) != JSON.stringify(current_values)) {
        $(document).trigger('fs:closed', $wrap);
      }
    }

    $('.fs-wrap').removeClass('fs-open');
    $('.fs-dropdown').addClass('hidden');
    window.fSelect.active_el = null;
    window.fSelect.active_id = null;
    window.fSelect.last_choice = null;
  }

})(jQuery);

.fs-wrap {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  width: 340px;
}

.fs-label-wrap {
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: default;
}

.fs-label-wrap,
.fs-dropdown {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fs-label-wrap .fs-label {
  padding: 6px 22px 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.fs-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  margin: auto;
}

.fs-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 340px;
  margin-top: 5px;
  z-index: 1000;
}

.fs-dropdown .fs-options {
  max-height: 200px;
  overflow: auto;
}

.fs-search input {
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 4px 0;
  width: 100%;
}

.fs-option,
.fs-search,
.fs-optgroup-label {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  cursor: default;
}

.fs-option:last-child {
  border-bottom: none;
}

.fs-search {
  padding: 0 4px;
}

.fs-option {
  cursor: pointer;
}

.fs-option.disabled {
  opacity: 0.4;
  cursor: default;
}

.fs-option.hl {
  background-color: #f5f5f5;
}

.fs-wrap.multiple .fs-option {
  position: relative;
  padding-left: 30px;
}

.fs-wrap.multiple .fs-checkbox {
  position: absolute;
  display: block;
  width: 30px;
  top: 0;
  left: 0;
  bottom: 0;
}

.fs-wrap.multiple .fs-option .fs-checkbox i {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #aeaeae;
  border-radius: 2px;
  background-color: #fff;
}

.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
  background-color: rgb(17, 169, 17);
  border-color: transparent;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center;
}

.fs-optgroup-label {
  font-weight: bold;
  text-align: center;
}

.hidden {
  display: none;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Create Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
  <!-- The below url are required for dropdown -->
  <link href="http://localhost/Performance/Test/css/fselect.css" rel="stylesheet">
  <script src="http://localhost/Performance/Test/js/fSelect.js"></script>
  <script>
    (function($) {
      $(function() {
        $('#project_manager').fSelect();
        $('#test_engineer').fSelect();
        $('#viewer').fSelect();
      });
    })(jQuery);
  </script>
</head>

<body>
  <label>Select Project Manager :</label><br/>
  <select id="project_manager" name="project_manager[]" multiple="multiple"><br/>
    <optgroup label="pm">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
    </optgroup>
  </select><br/>
  <label>Select Test Engineer :</label><br/>
  <select id="test_engineer" name="test_engineer[]" multiple="multiple"><br/>
    <optgroup label="te">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
    </optgroup>
  </select><br/>
  <label>Select Viewer :</label><br/>
  <select id="viewer" name="viewer[]" multiple="multiple"><br/>
    <optgroup label="viewer">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
    </optgroup>
  </select><br/>
</body>

</html>