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.

Answer 1

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>