禁用属性不适用于 ListBoxFor 和 DropDownListFor

Posted 2023-05-08

【中文标题】禁用属性不适用于 ListBoxFor 和 DropDownListFor

【英文标题】：Disabled property not working for ListBoxFor and DropDownListFor

【发布时间】：2016-09-17 20:26:52

【问题描述】：

我有一个网页，它通过像这样的 RenderPartial html Helper 渲染组件来动态创建组件

Html.RenderPartial("_UploadStaticField", config);

配置对象中有一个名为“isUnderReview”的字段。当此设置为 true 时，应使用以下代码禁用组件

//Single selection
<div class="editor-section">
    <div class="label">
        @Html.DisplayEditLabel(Model.Label, Model.Required.Value)
    </div>
    <div class="field large-text-field">
        @Html.DropDownListFor(m => m.SelectedListOptionID, new SelectList(Model.ListOptions, "ID", "Name", Model.SelectedListOptionID).OrderBy(l => l.Value), new Dictionary<string, object>
                    "id", "staticField_" + Model.ID)
    </div>
</div>

<script>
    $(document).ready(function () 
        if ("@Model.IsUnderReview" == "True") 
        document.getElementById("staticField_" + "@Model.ID").disabled = true;
        
    );
</script>

和..

//Multiple selection
<div class="editor-section">
    <div class="label">
        @Html.DisplayEditLabel(Model.Label, Model.Required.Value)
    </div>
    <div class="field large-text-field">
        @Html.ListBoxFor(x => x.SelectedRoles, filetypes, new  @class = "multiselectFileTypes" , id = "staticFieldM_" + Model.ID)
    </div>
</div>

@Scripts.Render(BundleConfig.Scripts_MultiSelect)
<script>
    $(document).ready(function () 
        if ("@Model.IsUnderReview" == "True") 
            document.getElementById("staticFieldM_" + "@Model.ID").disabled = true;
        
    );
</script>

代码可以运行到方法运行但组件仍然可以使用的程度。有没有办法取消任何用户选择，因为值不会改变？

【参考方案1】：

脚本永远不应该是部分的（您可能会生成多个内联脚本，这可能会导致其他问题，尤其是对于捆绑包）。然而，这甚至不需要脚本，您可以使用简单的if 语句或条件属性来生成您想要的。

当你说“但组件仍然可以使用”时，我猜你使用插件来生成控件，正如Scripts.Render(BundleConfig.Scripts_MultiSelect) 所建议的那样，这将隐藏原始@ 987654323@ 元素并生成自己的 html，这就是它仍然具有交互性的原因。

但下一个问题是禁用的控件不会回发值，因此 SelectedListOptionID 和 SelectedRoles 的值将是它们的默认值，这可能会导致您的应用程序失败，具体取决于您的 POST 方法中的代码。

将@Scripts.Render() 移动到您的视图或布局中，删除脚本以禁用该元素，然后将部分更改为

@if(Model.IsUnderReview)

    @Html.HiddenFor(m => m.SelectedListOptionID) // if you want the value to be posted
    // add an element to display the Name associated with the SelectedListOptionID
    // if necessary, for example your view model might include a property
    // string SelectedListOptionName

else

    @Html.DropDownListFor(m => m.SelectedListOptionID, new SelectList(Model.ListOptions, "ID", "Name").OrderBy(l => l.Value))

旁注：

没有理由添加您自己的id 属性（ DropDownListFor() 方法生成 <select id="SelectedListOptionID" ... > 删除SelectList构造函数的最后一个参数 (Model.SelectedListOptionID) - 它被忽略 DropDownListFor() 方法。我还建议您的模型包含一个 IEnumerable<SelectListItem> OptionsList 属性，并将其填充到控制器中，以便它可以简单地为 @Html.DropDownListFor(m => m.SelectedListOptionID, Model.OptionsList)

【讨论】：

感谢斯蒂芬的回复。我使用 Model.ID 的原因是因为可以使用相同的代码来生成多个静态字段。因此，如果我使用生成的“SelectlistOptionID”，它将对所有生成的静态字段应用相同的操作。此外，该代码适用于单个 DropdownListFor，谢谢，但不适用于 ListBoxFor。

对于ListBoxFor() 选项，您需要为SelectedRoles 中的每个值生成一个隐藏输入（您不能只使用@Html.HiddenFor(m => m.SelectedRoles)，因为它是一个数组。

@for(int i - 0; i < Model.SelectedRoles; i++) @Html.HiddenFor(m => m.SelectedRoles[i]) - 并不是说​​它必须是for 循环并且属性必须是IList（不是IEnumerable）