禁用 jquery 选择的下拉菜单

Posted 2023-05-07

【中文标题】禁用 jquery 选择的下拉菜单

【英文标题】：disable jquery-chosen dropdown

【发布时间】：2013-06-13 18:07:15

【问题描述】：

我有一个选择 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 idioms 来禁用事物，禁用 <select> 这只是禁用底层选择，而不是在它上面选择的东西。我什至求助于手动添加另一个具有高 z-index 的 div 以使框变灰，但我认为这可能是丑陋和错误的。

感谢您的帮助！

【参考方案1】：

您只禁用了select，但选择将其呈现为 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

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

【讨论】：

liszt:updated好像有错别字，不应该是`list:updated吗？

liszt 是正确的，但现在chosen:updated 无论如何都是正确的方法。

建议：您可能需要在回答的第一个部分指定最新版本的代码，因为许多用户将使用最新版本。我使用了liszt:updated 并没有工作，因为它不能在新版本中工作。

.trigger("chosen:updated"); 它还用于激活或停用，例如，如果您在函数中再次调用它。

$('#foobar option:not(:selected)').prop('disabled', true).trigger("chosen:updated");将禁用 Dropbox 中除所选项目之外的其他项目。

【参考方案2】：

在最新版本中，liszt:updated 不再工作。你需要使用chosen:updated:

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

这是JSFiddle。

【参考方案3】：

PSL 是正确的，但选择的已更新。

在你禁用后把这个：

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

【参考方案4】：

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

这很好用！！！！ @chosen v1.3.0

【参考方案5】：

你可以试试这个：

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

【参考方案6】：

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

【参考方案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();
);