如果一个选项 Selected 禁用了其他选定的选项，则全部选择

Question

如果选择了一个选项，我需要禁用相同的其他选项。我已经尝试过，但没有为我工作。下面是我的 html 选择选项，如果选择了一个，则希望禁用

<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">     
      <option value="SYS0001">SYS0001</option>
      <option value="SYS0002">SYS0002</option>
      <option value="SYS0003">SYS0003</option>
      <option value="SYS0004">SYS0004</option>
      <option value="SYS0005">SYS0005</option>
      <option value="SYS0006">SYS0006</option>
      <option value="SYS0007">SYS0007</option>
      <option value="SYS0008">SYS0008</option>
      <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">     
      <option value="SYS0001">SYS0001</option>
      <option value="SYS0002">SYS0002</option>
      <option value="SYS0003">SYS0003</option>
      <option value="SYS0004">SYS0004</option>
      <option value="SYS0005">SYS0005</option>
      <option value="SYS0006">SYS0006</option>
      <option value="SYS0007">SYS0007</option>
      <option value="SYS0008">SYS0008</option>
      <option value="SYS0009">SYS0009</option>
</select>

<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">     
      <option value="SYS0001">SYS0001</option>
      <option value="SYS0002">SYS0002</option>
      <option value="SYS0003">SYS0003</option>
      <option value="SYS0004">SYS0004</option>
      <option value="SYS0005">SYS0005</option>
      <option value="SYS0006">SYS0006</option>
      <option value="SYS0007">SYS0007</option>
      <option value="SYS0008">SYS0008</option>
      <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">     
      <option value="SYS0001">SYS0001</option>
      <option value="SYS0002">SYS0002</option>
      <option value="SYS0003">SYS0003</option>
      <option value="SYS0004">SYS0004</option>
      <option value="SYS0005">SYS0005</option>
      <option value="SYS0006">SYS0006</option>
      <option value="SYS0007">SYS0007</option>
      <option value="SYS0008">SYS0008</option>
      <option value="SYS0009">SYS0009</option>
</select>

这个js代码我试过了，但是不行

$('.input_slip_no').change(function(){

   alert('aaa');
    // start by setting everything to enabled
    $('select[name*="slip_no"] option').attr('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="slip_no"]').each(function(){
        var $this = $(this);
          $('select[name*="slip_no"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val())
               $(this).attr('disabled',true);
        });
    });

});

我正在尝试禁用选择类更改功能，但 js 不起作用。我不知道我错在哪里。 禁用以下答案的工作，但由于禁用值而无法插入选定的数据。是否可以只报警。该值已被选中。

Answer 1

这可以简单地做到：

$('.input_slip_no').on('change', function() {
    //Get selected options
    var selected_options = $('.input_slip_no').map(function(){
      return this.value
    }).get();

    //Disable the already selected options and enable others
    $('.input_slip_no option').each(function(index) {
      $(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
    });
});

希望这会有所帮助。

$('.input_slip_no').on('change', function() {
  var selected_options = $('.input_slip_no').map(function(){
    return this.value
  }).get();

  $('.input_slip_no option').each(function(index) {
    $(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>

<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">     
  <option value="SYS0001">SYS0001</option>
  <option value="SYS0002">SYS0002</option>
  <option value="SYS0003">SYS0003</option>
  <option value="SYS0004">SYS0004</option>
  <option value="SYS0005">SYS0005</option>
  <option value="SYS0006">SYS0006</option>
  <option value="SYS0007">SYS0007</option>
  <option value="SYS0008">SYS0008</option>
  <option value="SYS0009">SYS0009</option>
</select>