如何在多个选择插件中选择限制数量的选项？答案

【问题标题】：how to select limit number of options in multiple select plugin?如何在多个选择插件中选择限制数量的选项？
【发布时间】：2017-06-12 10:57:15
【问题描述】：

我是 jquery 的新手。

我正在使用多选插件 jquery。

我希望用户不能选择超过 3 个选项。

这里我还禁用了全选选项。

这是我的代码：

<select multiple id='testbox'>
  <option value='1'>First Option</option>
  <option value='2'>Second Option</option>
  <option value='3'>Third Option</option>
  <option value='4'>Fourth Option</option>
  <option value='5'>Fifth Option</option>
</select>

jQuery 代码：

$("select").multipleSelect({
    selectAll: false
 });

请帮助我。在此先感谢:)

【问题讨论】：

标签： javascript jquery multiple-select

【解决方案1】：

编辑：

jsFiddle example 使用多选插件工作

var limit = 3;

var $multiSel = $("select").multipleSelect({
placeholder: "Here is the placeholder",
width: 200,
filter: true,
selectAll: false,
onClick: function(view) {
    var $checkboxes = $multiSel.next().find("input[type='checkbox']").not(":checked");
    var selectedLen = $multiSel.multipleSelect('getSelects').length;
    if (selectedLen >= limit) {
       $checkboxes.prop("disabled", true);
    } else {
       $checkboxes.prop("disabled", false);
    }
 }
});

【讨论】：

如果您使用 select 同时选择多个项目，这将不起作用。单击第一个元素，然后按 shift 并单击最后一个元素。
用多选插件编辑，这样更好吗？
感谢@EA-Lille 这就是我要找的东西！！谢谢朋友
如果用户点击第 4 个复选框，@EA-Lille 是否可能向我显示警报消息，您无法选择更多。我在等你的回复
您无法检测到对禁用元素的点击。请参阅此帖子stackoverflow.com/a/924731/6703798。您唯一的解决方案是使用 CSS 来模拟禁用，然后您将能够单击伪造的禁用输入。像这样stackoverflow.com/a/16109366/6703798

【解决方案2】：

为选择添加change事件并检查所选选项的长度

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          // you can disable rest of the things here
      }
  });

【讨论】：

这是多选而不是多选

【解决方案3】：

你可以这样做

if($("select").multipleSelect("getSelects").length > 3)
{
   alert('Not allowed');
}

【讨论】：