1つのオプションが選択されている場合その他の選択されたオプションフォームすべて選択

Question

1つのオプションが選択されている場合、同じ他のオプションを無効にする必要があります。私は試してみましたが、私のために働いていません。怒鳴る私のhtmlのオプションを選択している、もう1つはこれは私が試したが、私は選択したクラス変更機能を無効にしようとしていますが、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

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

を選択した場合は無効にしたいです。私はどこが間違っているのか分からない。 以下の回答は無効になっていますが、無効な値のため選択したデータを挿入できません。警告することだけが可能です。この値はすでに選択されています。単純に行うことができる

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>