select2 多选：禁用（锁定）一些选定的选项答案

【问题标题】：select2 multiselect: disable (lock) some of the selected optionsselect2 多选：禁用（锁定）一些选定的选项
【发布时间】：2019-12-10 02:56:54
【问题描述】：

我的代码中有一个选择下拉菜单，如下所示。我想在其中保留一些预选的选项。一些预先选择的选项应该是固定的，因此用户不能更改它们。为此，我编写了以下代码：

<select id="select2-multiple" name="users" multiple="multiple" style="width: 50%">
    <option value="4">Admin</option>
    <option value="5">Manager</option>
    <option disabled="disabled" selected value="6">User</option>
    <option selected value="7">ReadOnly User</option>
    <option disabled="disabled" selected value="8">Assistant Manager</option>
</select>
<script>
    $(document).ready(function () {
        $('#select2-multiple').select2();
    });
</script>

预选选项显示没有问题。但是带有disabled="disabled" 的那些仍然可以从列表中删除。如何防止删除这些选项？

【问题讨论】：

标签： javascript jquery jquery-select2 multi-select

【解决方案1】：

我找到了。我需要使用 select2 的locked 功能。所以我所要做的就是将问题中的代码更改为：

<select
  id="select2-multiple"
  name="users"
  multiple="multiple"
  style="width: 50%"
>
  <option value = "4">Admin</option>
  <option value = "5">Manager</option>
  <option locked="locked" selected value = "6">User</option>
  <option selected value = "7">ReadOnly User</option>
  <option locked="locked" selected value = "8">Assistant Manager</option>
</select>
<script>
  $(document).ready(function() {
  $('#select2-multiple').select2();
});
</script>

所以基本上使用locked 而不是禁用。但是，我最初使用的是 select2 3.2 版，但这在那里不起作用。我必须升级到 3.5.4 才能使用此功能。

文档可以在这里找到：

http://select2.github.io/select2/#locked-selections

我发现这个 SOF 线程也很有帮助：

how to implement select2 with lock selection

【讨论】：

你能提供locked的文件吗？