Bootstrap Multiselect Limit Problem

Question

Ich habe ein Multiselect-Dropdown mit Bootstrap Multiselect erstellt. Ich muss ein Limit in der Auswahl der Optionen setzen (Hier habe ich es auf 5) und wenn das Limit erreicht, habe ich nur die anderen Optons deaktiviert und es funktioniert perfekt. Aber das Problem ist, wenn ich versuchte, mehr als 5 mit der UMSCHALTTASTE auszuwählen. Es funktioniert nicht (bedeutet meine jQuery zu verhindern, dass die Auswahl nicht funktioniert) und ich kann mehr als 5 auswählen. Bitte überprüfen Sie das Snippet und geben Sie mir eine Lösung.

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>

Bitte prüfen Bild

Answer 1

Sie benötigen. Probieren Sie die Below jQuery aus.

Bitte Überprüfen Sie es heraus hier ->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

Sie müssen separat validieren, wenn mehr als 5 Optionen ausgewählt sind. Shift-Taste zu sperren, wenn Klicken auf die Liste Option

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

Wenn Kontrollkästchen einer zu der Zeit ausgewählt werden, können sie nie mehr als 5.