Bootstrap Multiselect限制問題

Question

我使用Bootstrap Multiselect創建了一個多選下拉列表。 我需要在選項選擇中設置一個限制（這里我將其設置為5），如果達到限制，我只是禁用其他選擇的按鈕，它完美地工作。 但問題是當我嘗試使用SHIFT鍵選擇5個以上時。 它不起作用（意味着我的jQuery阻止選擇不起作用），我可以選擇超過5.請檢查代碼片段並給我一個解決方案。

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

請檢查圖像

Answer 1

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

請在這里查看 - > JSFIDDLE

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

Answer 2

如果選擇了5個以上的選項，則需要單獨驗證。

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

當一個復選框被選中時，它們永遠不會超過5。

Answer 3

如果在同一頁面中有多個具有相同選項值的多重選擇，請確保在啟用/禁用復選框時添加正確的選擇器功能，您必須替換此行

    var input = jQuery('input[value="' + jQuery(this).val() + '"]');

為了這

    var input = jQuery('#soft_skill_list + .btn-group input[value="' + jQuery(this).val() + '"]');

否則，您也將禁用其他多選控件中的其他復選框。

我會是這樣的：

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('#soft_skill_list + .btn-group 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('#soft_skill_list + .btn-group  input[value="' + jQuery(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('li').addClass('disabled');
                });
            }
        }});