禁用属性不适用于 ListBoxFor 和 DropDownListFor

Question

我有一个网页，它通过像这样的 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>

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

Answer 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))
}

旁注：

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