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。

请在这里查看 - ＆gt; 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');
                });
            }
        }});

Bootstrap Multiselect Limit Issue

3 个答案: