select2 不会禁用或清除

Question

我有一个次要选择从属于主要选择（选择一家商店，然后选择一个部门 - 与选择一个国家，然后选择一个州相同）。

无论我撕掉多少其他代码，我都绝对无法让 select2 的 ('enable',false) 和 ('data', null) 方法工作。

<select id="stores">
  <option value="foo">foo</option>
</select>
<select id="depts">
  <option value="bar">bar</option>
</select>

// ...some logic that selects a store, then fetches that store's depts ...

$('#depts').select2('enable',false);// does not disable control
$('#depts').select2('data',null); // does not clear control

所以我不得不这样做：

$('select#depts').empty(); // clears HTML element
$('#depts').select2(); // re-enhances select w/ select2
$('#depts').select2('disable',true); // disables 

它在 jsfiddle 中表现自己，所以我什至无法发布示例并请求帮助。我只是……难住了。

Answer 1

// to disable
$('#statusSelect').select2('disable');

//to enable
$('#statusSelect').select2('enable');

Answer 2

这适用于所有浏览器：

$('#statusSelect').select2('destroy');
$('#statusSelect').prop('disabled', true);
$('#statusSelect').select2();

这会给你一个禁用的 select2 输入。

简单地重新启用：

$('#statusSelect').select2('destroy');
$('#statusSelect').prop('disabled', false);
$('#statusSelect').select2();

不利的一面是，当 select2 被销毁并重新应用时，这会导致您的选择框在瞬间改变外观。

此外，旧版本的 select2 不支持“只读”和“禁用”。

Answer 3

您可能遇到了 select2 错误 1104。不幸的是，在 IE8-10 中它仍然是一个问题，但这不是 select2 的错。问题是当元素被禁用时 IE 不会触发 propertychange 事件，也没有实现其他浏览器使用的 MutationObserver 功能。幸运的是，我编写了一个小型 jQuery 插件，它允许在禁用元素时触发 propertychange 事件。你可以找到它here。

$('#originalSelect').fireOnDisable().select2();
$('#originalSelect').prop('disabled', true);

现在应该可以在 IE8-10 中使用。如果你需要支持 IE6-7，你就靠自己了！

Answer 4

如果您有 select2 下拉框的唯一 ID，请使用该 ID，

$("#id-select2").attr("disabled", true);

Answer 5

此代码应适用于所有浏览器（select2 v4.0.4）：

禁用：

$('select').prop('disabled', true).trigger('change');

启用：

$('select').prop('disabled', false).trigger('change');

Answer 6

对于 IE，您必须在启用/禁用后重新初始化 select2

// change action disable
$('.custom-select').select2()
.on("change", function(e) {
   $('.custom-select').prop("disabled", true).select2(); //call select2
})

// disable alternative
 $('.custom-select').prop("disabled", true).select2(); //call select2

Answer 7

你不需要这个吗：

$('#depts').prop('disabled', false);

同this question

Answer 8

如果有人尝试在 .net 服务器代码中执行此操作：

this.mySelect2elementID.Attributes.Add("disabled", "true");