javascript - 禁用 jquery-chosen 下拉菜单

Question

我有一个选择 div，我正在使用 chosen jquery plugin样式化和添加功能(最值得注意的是，搜索)。 div 看起来像这样，

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

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

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

在加载某些 AJAX 时，我想禁用整个 <select>分区也许用这样的东西，

 $('#foobar').disable()

或者这个

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

我想你明白了。

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

感谢您的帮助!

Answer 1

您只是禁用了您的 select，但 chosen 将其呈现为 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");

我找到了资料here

Fiddle

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