2016-12-17 67 views
2

如果選擇了一個選項,我需要禁用相同的其他選項。我已經嘗試過但並不適合我。波紋管是我的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無法正常工作。我不知道我錯在哪裏。 禁止在下面的答案工作,但無法插入選定的數據,因爲禁用值。是否有可能只提醒。該值已被選中。

+0

代碼做工精細https://jsfiddle.net/9vboppst/ –

+0

我用波紋管回答說,對我的作品的代碼。 – Dev

回答

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); 
    }); 
}); 

希望這有助於。

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

+0

您的代碼還會禁用當前所選下拉列表中的給定選項 – Arvind

+0

是的,這是否應該是一個問題? –

+0

@ ZakariaAcharki選項被禁用,但我也想插入選定的項目。當它禁用無法插入數據庫因爲禁用。 – Dev

相關問題