13

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

无论我撕掉多少其他代码，我都绝对无法让 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 中表现自己，所以我什至无法发布示例并请求帮助。我只是……难住了。

4

8 回答 8

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

//to enable
$('#statusSelect').select2('enable');
于 2014-11-10T11:33:39.493 回答
12

这适用于所有浏览器：

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

这为您提供了一个禁用的 select2 输入。

简单地重新启用：

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

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

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

于 2013-11-25T09:34:21.747 回答
5

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

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

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

于 2013-11-05T03:16:29.827 回答
2

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

$("#id-select2").attr("disabled", true);
于 2016-07-20T22:19:50.290 回答
2

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

要禁用：

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

启用：

$('select').prop('disabled', false).trigger('change');
于 2018-04-07T09:36:58.143 回答
1

对于 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
于 2016-02-04T17:25:35.137 回答
0

你不需要这个：

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

和这个问题一样

于 2013-07-16T15:40:13.983 回答
0

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

this.mySelect2elementID.Attributes.Add("disabled", "true");
于 2017-03-22T16:05:03.207 回答