禁用 jquery 选择的下拉菜单

我有一个选择的 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 习惯用法来禁用一些东西，禁用 <select>，它只禁用底层的选择，而不是它上面的选择。我甚至手动添加了另一个高 z-index的 div，只是让它变成灰色，但我认为这可能很难看，而且有问题。

谢谢你的帮助！

94424 次浏览
小开
最佳答案

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:

$('#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.

小开

In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:

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

Here's a JSFiddle.

小开

PSL was correct, but chosen has been updated since.

Put this after you do the disabling:

$("#your-select").trigger("chosen:updated");
小开 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

This works Perfect!!!! @chosen v1.3.0

小开 
$("chosen_one").chosen({
max_selected_options: -1
});
小开 
$(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();
});
小开

You can try this:

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

提交答案