查看官方文档

Question

我有一个类型为select2的列表。

<select id="list" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="Types">
<option value="None">None</option>
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
</select>

我想禁用 value = 1 的选项所以我喜欢这个

$("#list>optgroup>option[value='1']").prop('disabled',true);
   Result:// <option value="1" disabled>One</option>

工作正常;但如果我想重新启用禁用选项，我尝试了以下代码，但仍然禁用了select2选项。

$("#list>optgroup>option[value='1']").prop('disabled',false);
$("#list>optgroup>option[value='1']").removeProp('disabled');
  Result://   <option value="1">One</option>

但奇怪的是删除了该选项的禁用属性。但是select2选项仍然被禁用。

没有得到如何解决这个问题。需要帮助。

更新：如果我检查select2的DOM，即使在removeinf禁用后它也具有此属性。

<li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li>

如果我使 aria-disabled =“false”，它将启用。无法得到原因。

Answer 1

实现此目的的最简单方法是在更改禁用属性后再次在元素上调用.select2(…)。

http://jsfiddle.net/xoxd2u15/

由于select2 用自定义HTML元素替换原始选择字段（并隐藏原始元素），并且显然没有“观察”原始选择元素的选项以便在其禁用状态下不断更改调用后，必须在更改状态后再次调用它，以便从原始元素的选项中读取当前属性值。

Answer 2

禁用尝试此操作：

$("#list>optgroup>option[value='1']").attr('disabled','disabled');

删除禁用尝试此操作：

$("#list>optgroup>option[value='1']").removeAttr('disabled');

Answer 3

在某些情况下，您需要同时删除prop（节点属性）和attr（文档HTML属性）。尽管jQuery倾向于以这种方式对待它们，但实际上它们并非完全相同。

所以您需要做

$("#list>optgroup>option[value='1']").removeAttr('disabled').removeProp('disabled');

这样，它既删除了节点属性又删除了dom属性。

那表示您可能需要更新select2实例，这里没有人提到合适的解决方案。

$('#list').trigger('change.select2');

.trigger（'change'）也可以工作，但是如果将其他功能连接到change事件中，则会产生一些副作用。此外，您不能在已经钩住的on（'change'）函数中使用它。

Answer 4

下面的代码行将禁用所有选项。

$('#list  option').prop('disabled',true);

此行将仅启用值为1的选项。

$('#list option[value="1"]').prop('disabled',false);

$('#list').select2();

以上是更简化的答案。

Answer 5

$("#list").find(':selected').attr('disabled','disabled');
$("#list").trigger('change');

查看官方文档

https://select2.org/programmatic-control/retrieving-selections

选择2禁用/启用特定选项

5 个答案:

查看官方文档