Select2 禁用/启用特定选项

Posted 2023-05-07

【中文标题】Select2 禁用/启用特定选项

【英文标题】：Select2 disable/enable specific option

【发布时间】：2015-09-24 11:54:46

【问题描述】：

我有一个 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，即使在删除禁用后它仍然具有此属性。

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

如果我使 aria-disabled="false" 它将启用。不知道是什么原因。

【问题讨论】：

您是否尝试在更改禁用属性后再次在元素上调用.select2(…)？

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

@CBroe 重新启用选项的问题。禁用功能正常工作。我尝试调用 select2()。它工作正常。但我无法得到 select2 中的问题是什么？

在更改选项的disabled 状态后再次调用.select2 即可正常工作：jsfiddle.net/xoxd2u15

当然，对于“普通”选择字段不需要调用任何其他内容，因为这是浏览器直接呈现的默认 html 元素。但是 select2 用自定义 HTML 元素替换了该选择字段（并隐藏了原始元素）——显然它不会“监视”原始选择元素的选项在调用后不断更改其禁用状态，并且所以你必须在改变状态后再次调用它，以便它从原始元素的选项中读取 current 属性值......

【参考方案1】：

实现这一点的最简单方法可能是在更改 disabled 属性后再次在元素上调用 .select2(…)。

http://jsfiddle.net/xoxd2u15/

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

【讨论】：

这是 Select2 4.0.0 中的 a known bug。 disabled 属性被缓存，但selected（和其他属性）没有。

嘿@Kevin，感谢您提供的信息。很高兴看到您正在为将来的版本修复此问题。

已修复：github.com/select2/select2/commit/…

【参考方案2】：

禁用试试这个：

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

要删除禁用试试这个：

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

【讨论】：

我也是这样做的。它仍然被禁用。请检查我的问题一次。

【参考方案3】：

当您需要同时删除 prop（节点属性）和 attr（文档 HTML 属性）时，有一些奇怪的情况。尽管 jQuery 倾向于以这种方式对待它们，但它们实际上并不相同。

所以你需要这样做

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

这样，它同时删除了 node 属性和 dom 属性。

也就是说，您可能需要更新这里没有人提到正确解决方案的 select2 实例。

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

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

【参考方案4】：

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

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

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

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

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

以上是更简化的答案。

【参考方案5】：

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

见官方文档

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

【讨论】：

请为您的答案提供更多上下文/解释一下，例如：自提出问题以来发生了什么变化，给出了接受的答案？

【参考方案6】：

如果您打算动态禁用和启用 select2 类的选择选项，您可以使用以下作为参考。

我有两个带有相同选项列表的选择标签（带有 ids xaxis 和 yaxis），我希望用户不要为此选择标签选择相同的选项。

function checkfieldvalue(value,select_id)
   
  /* enable all options first */
  $('#xaxis option').prop('disabled',false); 
  $('#yaxis option').prop('disabled',false);
  if(select_id==0)
    $('#xaxis option[value="'+value+'"]').prop('disabled',true);      
  else
    $('#yaxis option[value="'+value+'"]').prop('disabled',true);