If one option Selected disabled other selected option form all select

Question

I need to disable same other option if one option selected. i have tried but not workig for me. bellow are my html select options and want to disable if one selected

<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>

This js code I have tried but not working

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

});

I am trying to disable select class change function but js not working.I don't know where I wrong. disabled working of below answer but not able to insert selected data because of disabled value. is it possible to only alert. that this value already selected.

Zakaria Acharki Zakaria Acharki · Accepted Answer · 2016-12-17T10:51:41

That could be done simply like :

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

Hope this helps.

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

If one option Selected disabled other selected option form all select

1 Answers