禁用jquery选择的下拉列表

Question

我有一个选择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>它只是禁用底层选择,而不是选择它上面的东西.我甚至采取了手动添加另一个高的div而z-index只是灰色的盒子,但我认为这可能是丑陋和错误.

谢谢您的帮助!

Answer 1

你只是禁用你的select,但是选择将它渲染为div和span等.因此,在禁用你的选择之后你需要更新插件以使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");

我在这里找到了这些信息

小提琴

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

Answer 2

在所选的最新版本中,liszt:updated不再有效.你需要使用chosen:updated:

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

这是一个JSFiddle.

Answer 3

PSL是正确的,但选择后更新.

在执行禁用后将其放入:

$("#your-select").trigger("chosen:updated");

Answer 4

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

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