I have created a multiselect dropdown using Bootstrap Multiselect . I need to set a limit in options selection (Here I set it to 5) and if the limit reached I just disabled the other select optons and it Works Perfectly. But the problem is When I tried to select more than 5 using SHIFT key. It doesn't work(means my jQuery to prevent selection not work) and I can select more than 5. Please Check the Snippet and give me a solution.
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=".12.4/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js" ></script>
<script src=".9.13/js/bootstrap-multiselect.min.js"></script>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href=".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 puter 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>I have created a multiselect dropdown using Bootstrap Multiselect . I need to set a limit in options selection (Here I set it to 5) and if the limit reached I just disabled the other select optons and it Works Perfectly. But the problem is When I tried to select more than 5 using SHIFT key. It doesn't work(means my jQuery to prevent selection not work) and I can select more than 5. Please Check the Snippet and give me a solution.
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./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare./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 puter 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>Please Check image
Share Improve this question edited May 29, 2017 at 14:25 iamwhoiam 2871 gold badge6 silver badges15 bronze badges asked May 29, 2017 at 14:11 Adharsh MAdharsh M 2,8123 gold badges22 silver badges35 bronze badges3 Answers
Reset to default 4You Need to Block Shift key When Clicking the list option. Try the Below jQuery.
Please Check it Out Here -> 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');
}
});
You need to validate separately if more than 5 options are selected.
if (selectedOptions.length >= 5) {
if (selectedOptions.length > 5) {
// Show error
} else {
// What you do already
}
When checkboxes are selected one at the time, they can never exceed 5.
If you have more than one multiselect in the same page with the same option value, make sure that you add the correct selector function when you are enabling/disabling the checkboxes, you have to replace this line
var input = jQuery('input[value="' + jQuery(this).val() + '"]');
for this
var input = jQuery('#soft_skill_list + .btn-group input[value="' + jQuery(this).val() + '"]');
Otherwise you will be disabling other checkboxes in the other multiselect controls as well.
I will be it like this:
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');
});
}
}});