93

我有一个选择 div，我正在使用选择的 jquery 插件来设置样式并添加功能（最值得注意的是搜索）。div 看起来像这样，

 <select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
 <option value=""></option>
 </select>

我正在使用这样选择的插件，

 $('#foobar').chosen();

在加载一些 AJAX 时，我想禁用整个<select>div。也许有了这样的东西，

 $('#foobar').disable()

或这个

 $('#foobar').prop('disabled', true)

我想你应该已经明白了。

关于如何做到这一点的任何想法？我尝试了许多不同的东西，比如使用 jquery idioms 来禁用事物，禁用<select>它只是禁用底层选择，而不是在它上面选择的东西。我什至求助于手动添加另一个具有高的 div 以z-index使框变灰，但我认为这可能是丑陋和错误的。

谢谢您的帮助！

4

7 回答 7

160

您只禁用了您的select，但选择将其呈现为 div 和 span 等。因此，在禁用您的选择后，您需要更新插件以使选择小部件也被禁用。你可以这样试试：

$('#foobar').prop('disabled', true).trigger("liszt:updated");

//For non-older versions of chosen you would want to do:

$('#foobar').prop('disabled', true).trigger("chosen:updated");

我在这里找到了信息

小提琴

更新小部件后，它所做的就是取消绑定插件上的单击或其他事件，并将其不透明度更改为 0.5。因为 div 没有真正的禁用状态。

于 2013-06-17T17:59:30.673 回答
52

在选择的最新版本中，liszt:updated不再工作了。您需要使用chosen:updated：

$(".chosen-select").attr('disabled', true).trigger("chosen:updated")

这是一个JSFiddle。

于 2013-08-22T19:06:51.327 回答
7

PSL 是正确的，但此后已更新选择。

在禁用后放置：

$("#your-select").trigger("chosen:updated");
于 2013-11-01T18:52:20.183 回答
7 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

这工作完美！！！！@选择 v1.3.0

于 2015-02-06T05:47:00.707 回答
1

你可以试试这个：

$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
于 2019-10-11T05:30:43.773 回答
0 
$("chosen_one").chosen({
  max_selected_options: -1
});
于 2016-07-25T17:29:58.047 回答
0 
$(document).ready(function () {
    $("#foobar").chosen().on('chosen:showing_dropdown',function() {
            $('.chosen-select').attr('disabled', true).trigger('chosen:updated');
            $('.chosen-select').attr('disabled', false).trigger('chosen:updated');
            $('.search-choice-close').hide();
    });
    $('.search-choice-close').hide();
});
于 2017-06-09T19:37:42.773 回答