禁用jquery选择下拉菜单


88

我有一个选择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>这只会禁用基础选择,而不是其上的所选内容。我什至采取了手动添加另一个具有高的divz-index来使框变灰的方法,但是我认为这可能很丑陋且有问题。

谢谢您的帮助!

Answers:


150

您只禁用了您的select,但选择了将其渲染为div,span等。因此,在禁用您的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");

我在这里找到了信息

小提琴

更新小部件后,它所做的就是将插件上的单击或其他事件解除绑定,并将其不透明度更改为0.5。由于div没有真正的禁用状态。


看起来好像有一个错字liszt:updated,难道不是`list:updated`吗?
lanoxx

1
liszt是正确的,但chosen:updated无论如何现在是正确的方法。
Kaleb Anderson

建议:您可能需要在答案的第一个中指定代码的最新版本,因为许多用户将使用最新版本。我曾经使用过liszt:updated并且没有工作,因为它不适用于新版本。
幸运

.trigger("chosen:updated");它还可以激活或停用,例如,如果您在某个函数中再次调用它。
Arenas V.

$('#foobar option:not(:selected)')。prop('disabled',true).trigger(“ chosen:updated”); 将禁用下拉框中除所选项目以外的其他项目。
Asad Naeem

51

在所选的最新版本中,liszt:updated它不再起作用。您需要使用chosen:updated

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

这是一个JSFiddle



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

这很完美!!!@选择v1.3.0


1

您可以尝试以下方法:

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


0
$(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();
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.