Question

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

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>

Answer 1

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

＆＃13;

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);
    }
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是可行的，但我想在选择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();
            }
        }
    });

如何使用Multiple select jQuery插件限制选择项？

2 个答案: