Question

我有一个select div，我正在使用chosen jquery plugin来设置样式并添加功能（最值得注意的是搜索）。 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来使盒子灰色，但我认为这可能是丑陋和错误。

感谢您的帮助！

Answer 1

您只是禁用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");

我找到了信息here

Fiddle

更新小部件后，它所做的就是取消绑定插件上的点击或其他事件，并将其不透明度更改为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");

这完美!!!! @chosen v1.3.0

Answer 5

您可以尝试以下方法：

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

Answer 6

$("chosen_one").chosen({
  max_selected_options: -1
});

Answer 7

$(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();
});

禁用jquery选择的下拉列表

7 个答案:

Fiddle