Bootstrap Multiselect限制問題

我使用Bootstrap Multiselect創建了多選下拉菜單。我需要在選項選項（這裏我將它設置爲5）中設置一個限制，如果達到的限制，我只是禁用其他選擇optons，它的作品完美。但問題是當我試圖選擇超過5使用SHIFT鍵。它不工作（意味着我的jQuery，以防止選擇不起作用），我可以選擇超過5個。請檢查代碼段並給我一個解決方案。Bootstrap Multiselect限制問題

JSFIDDLE

jQuery('#soft_skill_list').multiselect({ 
 
     enableFiltering: true, 
 
     maxHeight:400, 
 
     enableCaseInsensitiveFiltering:true, 
 
     nonSelectedText: 'Soft Skills *', 
 
     numberDisplayed: 2, 
 
     selectAll: false, 
 
     onChange: function(option, checked) { 
 
       // Get selected options. 
 
       var selectedOptions = jQuery('#soft_skill_list option:selected'); 
 
    
 
       if (selectedOptions.length >= 5) { 
 
        // Disable all other checkboxes. 
 
        var nonSelectedOptions = jQuery('#soft_skill_list option').filter(function() { 
 
         return !jQuery(this).is(':selected'); 
 
        }); 
 
    
 
        nonSelectedOptions.each(function() { 
 
         var input = jQuery('input[value="' + jQuery(this).val() + '"]'); 
 
         input.prop('disabled', true); 
 
         input.parent('li').addClass('disabled'); 
 
        }); 
 
       } 
 
       else { 
 
        // Enable all checkboxes. 
 
        jQuery('#soft_skill_list option').each(function() { 
 
         var input = jQuery('input[value="' + jQuery(this).val() + '"]'); 
 
         input.prop('disabled', false); 
 
         input.parent('li').addClass('disabled'); 
 
        }); 
 
       } 
 
      }});


 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> 
 

 
<select name="soft_skill_list[]" class="soft_skill_list" id="soft_skill_list" multiple="multiple"> 
 
    <option>Analysing data</option> 
 
    <option>Banquets Operations</option> 
 
    <option>Concierge Operations</option> 
 
    <option>Customer service experience</option> 
 
    <option>Measuring and calculating</option> 
 
    <option>Micros</option> 
 
    <option>Numeracy Skills </option> 
 
    <option>Opening Hotels</option> 
 
    <option>Opera</option> 
 
    <option>Outside catering</option> 
 
    <option>Pre-opening</option> 
 
    <option>Procedures </option> 
 
    <option>Proficiency in computer programming</option> 
 
    <option>Public speaking experience </option> 
 
    <option>Reservation</option> 
 
    <option>Restaurants operations</option> 
 
    <option>Revenue Analysis</option> 
 
    <option>Rooms Division</option> 
 
    <option>Safety and Security</option> 
 
    <option>Sales administration</option> 
 
    <option>Sales Operations</option> 
 
    <option>Social Media</option> 
 
</select>

請檢查圖像

來源

2017-05-29 AdhershMNair

您要阻止Shift鍵的同時單擊列表選項。嘗試下面的jQuery。

請看看這裏 - >

var shiftClick = jQuery.Event("click"); 
shiftClick.shiftKey = true; 

    $(".multiselect-container li *").click(function(event) { 
     if (event.shiftKey) { 
      //alert("Shift key is pressed"); 
      event.preventDefault(); 
      return false; 
     } 
     else { 
      //alert('No shift hey'); 
     } 
    });

來源

2017-05-30 06:24:26 Arun

請更新在jsfiddle。雖然我可以檢查 – AdhershMNair

請稍候...將立即更新 – Arun

哦，這是工作，真棒。謝謝。@阿倫 – AdhershMNair

你需要的，如果選擇了超過5個選項分別進行驗證。

if (selectedOptions.length >= 5) { 
    if (selectedOptions.length > 5) { 
    // Show error 
    } else { 
    // What you do already 
    }

當複選框的時候選擇了一個，他們永遠不能超過5

來源

2017-05-29 14:31:11 Gerard

我嘗試這樣做。但它不起作用。你會請更新新的代碼來搗鼓。並展示其工作。 – AdhershMNair

https://jsfiddle.net/beekvang/ytdpvmu2/ – Gerard

它只是顯示警報。但是並不妨礙選擇權的選擇。它仍然繼續這個問題。我想不要選擇，如果我們選擇超過5個。 – AdhershMNair

Bootstrap Multiselect限制問題

回答

相關問題