已禁用属性不适用于 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 语句或条件属性来生成您想要的内容。

当您说 "but the components are still able to be used" 时，我猜您是按照 Scripts.Render(BundleConfig.Scripts_MultiSelect) 的建议使用插件生成控件，这将隐藏原始控件<select> 元素并生成自己的 html 这就是它仍然具有交互性的原因。

但下一个问题是禁用的控件不会 post 返回一个值，因此 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)

已禁用属性不适用于 ListBoxFor 和 DropDownListFor

Disabled property not working for ListBoxFor and DropDownListFor

asp.net-mvc

html.dropdownlistfor

razor

html.listboxfor

已禁用 属性 不适用于 ListBoxFor 和 DropDownListFor

Disabled property not working for ListBoxFor and DropDownListFor

asp.net-mvc

html.dropdownlistfor

razor

html.listboxfor

已禁用属性不适用于 ListBoxFor 和 DropDownListFor