如何使用多选jQuery插件限制选择项 - how to limit select item with Multiple select jQuery plugin?

how to limit select item with Multiple select jQuery plugin?

本文关键字：选择插件 jQuery 何使用 | 更新日期: 2023-09-27

我正在使用这个多选jQuery插件，我想限制selectbox上的选择项的数量。

http://wenzhixin.net.cn/p/multiple-select/docs/

<form action="show.php" method="post">
<select name="test[]" multiple="multiple" id="duo">
    <option value="1">January</option>
    <option value="2">January1</option>
    <option value="3">January2</option>
    <option value="4">January3</option>
    <option value="5">January4</option>
    <option value="6">December</option>
</select>
<input type="submit" name="submit" value="submit">
</form>
<script src="jquery.multiple.select.js"></script>
<script>
    $("#duo").multipleSelect({
        placeholder: "Here is the placeholder",
        width: 200,
        selectAll: false,
        filter: true,
    });
</script>

这是可行的，但我想在选择3项后禁用复选框

var validSelection=null；

    $("#duo").multipleSelect({
        placeholder: "Here is the placeholder",
        width: 200,
        selectAll: false,
        filter: true,
        onClick: function(view) {
            if ($('#duo').val().length >= 3) {
                $('#duo').multipleSelect('enable');
              alert('You can only choose 3!');
              $('#duo').val(validSelection);
            } else {
              validSelection = $('#duo').val();
            }
        }
    });

将onClick事件处理程序添加到multipleSelect初始化：

var limit = 3;
var $multiSel = $("#duo").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);
    }
  }
});

@import url('http://wenzhixin.net.cn/p/multiple-select/multiple-select.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://wenzhixin.net.cn/p/multiple-select/jquery.multiple.select.js"></script>
<form action="show.php" method="post">
<select name="test[]" multiple="multiple" id="duo">
    <option value="1">January</option>
    <option value="2">January1</option>
    <option value="3">January2</option>
    <option value="4">January3</option>
    <option value="5">January4</option>
    <option value="6">December</option>
</select>
<input type="submit" name="submit" value="submit">
</form>