可以禁用/使项目在选择列表中不可见？答案

【问题标题】：Possible to disable/make item not visable in select list?可以禁用/使项目在选择列表中不可见？
【发布时间】：2010-06-28 21:35:48
【问题描述】：

是否可以在选择列表中使项目禁用/不可见？我想要完成的是，根据许多复选框，如果它们被选中，这些字段应该出现在下拉列表中。但是，我确实有一些必须始终位于下拉列表中的字段，并且它们都应该按顺序排列。

复选框：

<table class="Fields"><tr>
    <td><%=Html.CheckBox("Field1", Model.DisplayField1, new { value = "Field1" })%> Field 1</td>
    <td><%=Html.CheckBox("Field2", Model.DisplayField2, new { value = "Field2" })%> Field 2</td>
    <td><%=Html.CheckBox("Field3", Model.DisplayField3, new { value = "Field3" })%> Field 3</td>
</tr><tr>
    <td><%=Html.CheckBox("Field4", Model.DisplayField4, new { value = "Field4" })%> Field 4</td>
    <td><%=Html.CheckBox("Field5", Model.DisplayField5, new { value = "Field5" })%> Field 5</td>
    <td><%=Html.CheckBox("Field6", Model.DisplayField6, new { value = "Field6" })%> Field 6</td>
</tr></table>

下拉：

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>Sort 1</td>
        <td><%= Html.DropDownList("drpSortColumn1", (SelectList)ViewData["SortColumns"])%></td>
    </tr>
</table>

下拉列表包含所有复选框字段 + 一些额外的字段，这些字段应该始终存在。因此，我可以动态删除所有内容并根据是否选中进行添加。我也需要在 UI 中执行此操作。理想情况下 jquery 不知何故。那么什么方法对此有好处呢？有禁用选项吗？否则会有什么选择？

谢谢！

//MrW

编辑：我试着这样做：

$('#drpSortColumn1 option[value=' + val + ']').hide();

但这似乎并不奏效。我不知道是否根本无法隐藏选项，或者我做错了。

【问题讨论】：

标签： jquery asp.net-mvc checkbox selectlist

【解决方案1】：

改变：

$('#drpSortColumn1 option[value=' + val + ']').hide();
$('#drpSortColumn1 option[value=' + val + ']').show();

到：

$('#drpSortColumn1 option[value=' + val + ']').attr('disabled','disabled');
$('#drpSortColumn1 option[value=' + val + ']').attr('disabled','');

或：

$('#drpSortColumn1 option[value=' + val + ']').attr('disabled',true);
$('#drpSortColumn1 option[value=' + val + ']').attr('disabled',false);

【讨论】：

我尝试了禁用的那个，但问题是它无论如何都会显示在列表中。我最终基本上这样做了：存储一个包含所有原始项目的 Json 对象，并为每个复选框检查，清除下拉列表，重新生成它，然后删除未选中的值。
这将消耗更多，并且如果用户选择了在下一个新选择中包含的一个，则用户将失去他选择的选项。希望你明白，对不起我的英语

【解决方案2】：

看看这里，我想这就是你要找的东西：jQuery disable SELECT options based on Radio selected (Need support for all browsers)

你可以有自己的命令，只要做出正确的条件，我认为它应该规则;）

干杯^^

编辑：好的，在你的情况下它不是很方便，所以这里有一些线索：

尝试使用下面 CuSS 描述的禁用属性，这将是成本最低且难以设置的。但它的主要缺点是该选项没有隐藏，即使它不再可选择。 Display:none for options 仅在我记得的 FF 中有效。
如果您准备好编写大量代码，您可以通过影响它们的 id 来删除和添加字段，以记住它们的顺序，例如

... ... 等等……

你必须有两次相同的选择，一次在 display:none div 中，包含所有选项的“默认”选择，我们不会操纵。

然后，如果您想隐藏一个选项，您可以在第一次选择时将其删除。当你想把它放回去时，创建一个带有两个参数的函数插入选项：一个用于识别选择（select1，select2，select3....不知道你是怎么得到的），另一个用于行（s ) 你想插入（一个数组似乎是最好的）。

然后您将所选内容克隆到正确选择的正确位置，它应该可以解决问题，至少这是我看到的唯一解决方案，如果您不想一直重新创建它，并保持正确的顺序.如果不清楚，请告诉我，但我希望这会有所帮助；）

【讨论】：

并非如此，因为该示例似乎正在使用应启用和禁用的预定义列表。我最多可以有 20 个可选字段，它们都可以打开或关闭（+ 我的 manditory 字段）。这意味着我需要为每一个可能的解决方案创建字典？！
这就是我的想法，因为无论如何，如果你想保持正确的顺序，你必须做这样的事情。并且 hide() 确实不适用于选项。我不确定是否有“轻型”解决方案。但是如果有人有更好的主意，（disabled 属性不是完全跨浏览器，但如果您不需要 IE6 支持，它可以解决问题，因为该选项将无法选择）。
好吧，考虑到目前总共有 25 个字段，而且将来很可能会更多，保持这种方式或多或少是不可能的。恐怕这不是一个选择。在我看来，这听起来会很慢，检查我目前有什么组合，然后加载正确的值。
检查答案的编辑，我显示了一个可能的解决方案。

【解决方案3】：

我最终这样做了：

$(document).ready(function() {
    $('.Fields input[type=checkbox]:checked').click(function() {

        $('#drpSortColumn1').children().remove();

        jQuery.each(fields, function(val, name) {
            $('#drpSortColumn1').append('<option value="' + val + '">' + name + '</option>')
        });

        $('.Fields input:checkbox:not(:checked)').each(function() {
            $('#drpSortColumn1 option[value=' + $(this).val() + ']').remove();
        });
    })
});

所以我存储了一个包含所有原始字段的 Json 对象，并且在每次单击复选框时，我从下拉列表中删除所有项目，并重新生成所有项目。然后我根据未选中的复选框从下拉列表中删除值。

【讨论】：