jQuery Select2 禁用/启用特定选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31261035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 disable/enable specific option
提问by Madhukar Hebbar
I have list which is of type select2.
我有 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>
I want to disable option which is having value=1so i did like this
我想禁用value=1 的选项， 所以我喜欢这个
$("#list>optgroup>option[value='1']").prop('disabled',true);
Result:// <option value="1" disabled>One</option>
It is working fine;but if i want to re-enable disabled option i tried below codes but still the select2 option is disabled.
它工作正常；但如果我想重新启用禁用选项，我尝试了以下代码，但仍然禁用了 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 property of the option is removed.but select2 option remains disabled.
但奇怪的是该选项的禁用属性已被删除。但 select2 选项仍处于禁用状态。
Not getting how to resolve this. Need help.
不知道如何解决这个问题。需要帮忙。
Update: If i check DOM of select2 it is having this property even after removinf disabled.
更新：如果我检查 select2 的 DOM，即使在禁用 removinf 后它也具有此属性。
<li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li>
if i make aria-disabled="false"it will enable. not able to get what is the cause.
如果我使aria-disabled="false"它将启用。无法得到是什么原因。
回答by CBroe
Probably easiest way to achieve this, would be calling .select2(…)on the element again after changing the disabled attribute.
实现这一点的最简单方法可能是.select2(…)在更改 disabled 属性后再次调用该元素。
Since select2 replacesthe original select field with custom HTML elements (and hides the original), and apparently does not “watch” the options of that original select element for changes in their disabled state constantly after invocation, you have to call it once more after changing the state, so that it reads the current attribute values from the original element's options.
由于 select2用自定义 HTML 元素替换了原始选择字段（并隐藏了原始元素），并且显然不会“监视”原始选择元素的选项在调用后不断更改其禁用状态，因此您必须在调用后再次调用它更改状态，以便它从原始元素的选项中读取当前属性值。
回答by answer99
For Disable Try this:
对于禁用试试这个：
$("#list>optgroup>option[value='1']").attr('disabled','disabled');
To remove Disable Try this:
删除禁用试试这个：
$("#list>optgroup>option[value='1']").removeAttr('disabled');
回答by Daniel Iser
There are some strange instances when you need to remove both the prop (node property) and the attr (Document HTML Attribute). They are in fact not one in the same though jQuery tends to treat them that way.
当您需要同时删除 prop（节点属性）和 attr（文档 HTML 属性）时，会出现一些奇怪的情况。尽管 jQuery 倾向于那样对待它们，但它们实际上并不相同。
So you would need to do
所以你需要做
$("#list>optgroup>option[value='1']").removeAttr('disabled').removeProp('disabled');
This way it both removes the node property and the dom attribute.
这样它既删除了节点属性又删除了 dom 属性。
That said you likely need to update the select2 instance which nobody here mentioned the right solution for.
也就是说，您可能需要更新 select2 实例，这里没有人提到正确的解决方案。
$('#list').trigger('change.select2');
.trigger('change') would also work but has some side effects if other functionality is hooked into the change event. Further you can't use it inside an already hooked on('change') function.
.trigger('change') 也可以工作，但如果其他功能与 change 事件挂钩，则会产生一些副作用。此外，您不能在已经挂钩的 ('change') 函数中使用它。
回答by user2497881
Below line of code will disable all the options.
下面的代码行将禁用所有选项。
$('#list option').prop('disabled',true);
This line will enable only option that is having value 1.
此行将仅启用值为 1 的选项。
$('#list option[value="1"]').prop('disabled',false);
$('#list').select2();
Above is more simplified answer.
以上是更简化的答案。
