如果选择了一个选项禁用其他所选选项,则表示全选

时间:2016-12-17 10:43:02

标签: javascript jquery html

如果选择了一个选项,我需要禁用相同的其他选项。我试过但不适合我。 bellow是我的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无法正常工作。我不知道我错在哪里。 禁用以下答案但由于禁用值而无法插入所选数据。是否有可能只提醒。已经选择了这个值。

1 个答案:

答案 0 :(得分:3)

这可以简单地完成:

$('.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);
    });
});

希望这有帮助。

&#13;
&#13;
$('.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);
  });
});
&#13;
<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>
&#13;
&#13;
&#13;