jquery Select 2禁用/启用特定选项

jucafojl  于 2022-12-29  发布在  jQuery
关注(0)|答案(7)|浏览(279)

我有一个类型为select 2的列表。

<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>

它运转良好;但如果我想重新启用禁用选项,我尝试了以下代码,但仍然禁用了select 2选项。

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

但奇怪的是禁用属性的选项是删除.但这select 2选项仍然禁用.
不知道如何解决这个问题。需要帮助。
更新:如果我检查select 2的DOM,即使在删除后也会禁用此属性。

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

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

nkhmeac6

nkhmeac61#

实现这一点的最简单方法可能是在更改disabled属性后再次对元素调用.select2(…)
http://jsfiddle.net/xoxd2u15/
由于select2用自定义HTML元素 * 替换 * 原始select字段(并隐藏原始字段),并且显然不会在调用后持续“监视”原始select元素的选项是否处于禁用状态,因此在更改状态后必须再次调用它,以便它从原始元素的选项读取当前属性值。

jq6vz3qz

jq6vz3qz2#

对于禁用请尝试此操作:

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

要删除禁用请尝试:

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

a0zr77ik3#

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

见正式文件

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

f45qwnt8

f45qwnt84#

如果您计划使用select2类动态禁用和启用选择选项,您可以使用以下内容作为参考。
我有两个选择标记(与id的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);      
  }
}
wooyq4lh

wooyq4lh5#

当你需要同时删除prop(node属性)和attr(文档HTML属性)时,会有一些奇怪的情况,尽管jQuery倾向于这样处理它们,但它们实际上并不是一回事。
所以你需要

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

这样它就同时删除了node属性和dom属性。
也就是说,您可能需要更新select2示例,这里没有人提到正确的解决方案。

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

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

gz5pxeao

gz5pxeao6#

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

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

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

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

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

以上是更简化的答案。

dgsult0t

dgsult0t7#

如果您不想取消绑定和绑定选择选项,此操作将起作用

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

相关问题