[英]Bootstrap Multiselect Limit Issue
我使用Bootstrap Multiselect创建了一个多选下拉列表。 我需要在选项选择中设置一个限制(这里我将其设置为5),如果达到限制,我只是禁用其他选择的按钮,它完美地工作。 但问题是当我尝试使用SHIFT键选择5个以上时。 它不起作用(意味着我的jQuery阻止选择不起作用),我可以选择超过5.请检查代码片段并给我一个解决方案。
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>
单击列表选项时需要阻止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');
}
});
如果选择了5个以上的选项,则需要单独验证。
if (selectedOptions.length >= 5) {
if (selectedOptions.length > 5) {
// Show error
} else {
// What you do already
}
当一个复选框被选中时,它们永远不会超过5。
如果在同一页面中有多个具有相同选项值的多重选择,请确保在启用/禁用复选框时添加正确的选择器功能,您必须替换此行
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');
});
}
}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.