禁用jqueryselect的下拉菜单

我有一个selectdiv,我使用选定的jquery插件风格和添加function(最显着,search)。 div看起来像这样,

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

我正在使用这个select的插件,

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

当一些AJAX加载时,我想禁用整个<select> div。 也许有这样的事情,

  $('#foobar').disable() 

或这个

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

我想你应该已经明白了。

任何想法如何做到这一点? 我已经尝试了许多不同的东西,比如使用jquery idioms来禁用东西,禁用<select>这只是禁用底层的select,而不是select的东西。 我甚至采取手动添加一个高z-index另一个div灰盒子,但我认为这可能是丑陋的,越野车。

谢谢您的帮助!

你只是禁用你的select ,但select呈现为div和跨度等。所以在禁用select后,您需要更新插件,以使select控件也被禁用。 你可以试试这个方法:

 $('#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"); 

我在这里find了这个信息

小提琴

一旦你更新了小部件,它所做的就是取消绑定插件上的点击或其他事件,并将其不透明度更改为0.5。 由于没有真正的禁用状态的一个div。

在select的最后一个版本, liszt:updated不再工作。 你需要使用chosen:updated

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

这是一个JSFiddle 。

PSL是正确的,但select已经更新。

把这个放在你禁用之后:

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

这工作完美! @selectv1.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(); });