Select2禁用/启用特定选项

2021/01/31 13:41 · jquery ·  · 0评论

我有一个类型为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>

我想禁用值为= 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(…)更改更改的禁用属性后再次调用该元素。

http://jsfiddle.net/xoxd2u15/

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

对于禁用,请尝试以下操作:

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

要删除禁用,请尝试以下操作:

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

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

所以你需要做

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

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

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

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

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

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

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

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

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

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

以上是更简化的答案。

本文地址:http://jquery.askforanswer.com/select2jinyong-qiyongtedingxuanxiang.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!