Select2 disable/enable 具体选项

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>

but strange is disabled 属性该选项被移除。但 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" 它将启用。无法得到什么原因。

Answer 1

禁用试试这个：

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

删除禁用试试这个：

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

Answer 2

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

http://jsfiddle.net/xoxd2u15/

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

Answer 3

在某些情况下，您需要同时删除 prop（节点属性）和 attr（文档 HTML 属性）。尽管 jQuery 倾向于那样对待它们，但它们实际上并不相同。

所以你需要做

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

这样它就同时删除了节点属性和 dom 属性。

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

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

.trigger('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

Answer 6

如果您计划使用 select2 class 动态禁用和启用 select 选项，您可以参考以下内容。

我有两个 select 标签（ids xaxis 和 yaxis）具有相同的选项列表，我希望用户不要 select 这个 select 标签的相同选项。

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

Select2 disable/enable 具体选项

Select2 disable/enable specific option

jquery

select

jquery-select2

查看官方文档