禁用 jquery 选择的下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17153417/
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
disable jquery-chosen dropdown
提问by gideonite
I have a select div that I'm using the chosen jquery pluginto style and add features to (most notably, search). The div looks something like this,
我有一个选择 div，我正在使用所选的 jquery 插件来设置样式和添加功能（最值得注意的是，搜索）。div 看起来像这样，
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
我正在使用这样选择的插件，
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select>div. Maybe with something like this,
在加载一些 AJAX 时，我想禁用整个<select>div。也许有这样的事情，
$('#foobar').disable()
or this
或这个
$('#foobar').prop('disabled', true)
I think you get the idea.
我想你应该已经明白了。
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select>which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-indexto just grey out the box, but I think that this is likely to be ugly and buggy.
关于如何做到这一点的任何想法？我尝试了许多不同的东西，比如使用 jquery 惯用语来禁用事物，禁用<select>它只是禁用底层选择，而不是在它上面选择的东西。我什至求助于手动添加另一个带有高的 div 以z-index将框变灰，但我认为这可能是丑陋和错误的。
Thanks for the help!
谢谢您的帮助！
回答by PSL
You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
您仅禁用您的select，但选择将其呈现为 div 和跨度等。因此，在禁用选择后，您需要更新插件以禁用选择小部件。你可以试试这个方法：
$('#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");
I found the information here
我在这里找到了信息
Fiddle
小提琴
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.
一旦您更新了小部件，它所做的就是解除插件上的单击或其他事件的绑定，并将其不透明度更改为 0.5。因为 div 没有真正的禁用状态。
回答by Orlando
回答by Pavan Katepalli
PSL was correct, but chosen has been updated since.
PSL 是正确的，但此后已更新选择。
Put this after you do the disabling:
在你禁用之后把这个：
$("#your-select").trigger("chosen:updated");
回答by user2877913
$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!! @chosen v1.3.0
这工作完美！！！！@选择 v1.3.0
回答by ruvi
You can try this:
你可以试试这个：
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
回答by Andrew Nodermann
$("chosen_one").chosen({
max_selected_options: -1
});
回答by boateng
$(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();
});
