带有可禁用选项的 jQuery 选择框答案

【问题标题】：jQuery select box with disable-able options带有可禁用选项的 jQuery 选择框
【发布时间】：2011-07-01 20:05:50
【问题描述】：

我正在为我的 HTML 表单寻找一个 jQuery/JavaScript 选择框。我的具体要求是我需要能够禁用控件菜单中的某些选项。我想知道是否有人找到了允许我这样做的插件，最好是使用类似

$("#selectControl").change(function()
{
    $(this).find(":selected").attr("disabled", "disabled");
});

当然，attr() 函数不适用于生成的元素，但是是否有 jQuery 插件可以封装此功能？

编辑

为了让自己更清楚，我会换一种说法：我有一个看起来像样式精美的选择框的 HTML 结构，背后隐藏着实际的 <select> 控件。可以在 <select> 中禁用 <option>，但在大多数用于样式选择框的 jQuery 插件中不能。我在问是否有一个插件将允许我禁用美化 <select> 元素中的某些选项。

谢谢，

詹姆斯

【问题讨论】：

Disabled 和 selected 实际上是属性而不是属性，在 jQuery 1.6 中进行了更新。查看 prop() 文档：api.jquery.com/prop
@AlienWebguy：谢谢你，但你错过了我的问题的重点。我进行了编辑以使自己更清楚 - 抱歉。
很抱歉。我不知道任何副手，但 jQuery 非常通用，您应该能够扩展您当前使用的任何插件以支持禁用选项。您能否制作一个 jsbin 或 jsfiddle 页面或提供指向您的示例的链接，以便我查看插件代码？
没问题。我目前正在使用这个插件：abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin 我一定会考虑扩展它。我只是想知道是否已经有一个插件出来了，所以我不必重写功能。

标签： jquery jquery-plugins select

【解决方案1】：

我不确定我是否正在跟踪您的问题，但下面的代码 sn-p 在下拉列表中运行，以隐藏某些选项：

//show them all
$('#<%= ddlRank.ClientID %> span').each(
    function () {
        var opt = $(this).find("option").show();
         $(this).replaceWith(opt);
    }
);

//hide unrelated
var selectionLost = false;
$('#<%= ddlRank.ClientID %> option').each(
    function () {
        if ($.inArray($(this).val(), related) == -1) {
            if ($(this).attr("selected")) {
                $(this).removeAttr("selected");
                selectionLost = true;
            }
            $(this).wrap("<span>").hide();
        }
    }
);

秘诀（隐藏它们，结合“显示所有”代码）是：

$(this).wrap("<span>").hide();

【讨论】：

【解决方案2】：

好吧，事实证明我看起来不够努力。对于那些想要和我一样东西的人，我找到了this plugin。为了让我的“选择时禁用”行为，我使用了 jQuery tie 插件，该插件链接到 URL 中某处的页面上。这是一个有点大的选择框插件，但缩小它应该没问题。使用 CSS 可以很容易地为该框设置样式，并且可以使用边框宽度技巧完全在没有图像的情况下完成。如果我有足够的兴趣，我会写一篇关于如何设置这些盒子样式的教程。

编辑

上面链接的插件实际上并没有很好地工作，所以我只是自己写的。如果有人想看，我会在一段时间内发布它的链接。

【讨论】：