通过下拉选择 mvc 4 禁用/启用输入字段答案

【问题标题】：disable/ enable input fields by drop down selection mvc 4通过下拉选择 mvc 4 禁用/启用输入字段
【发布时间】：2015-02-05 11:19:11
【问题描述】：

我正在尝试创建 ASP.NET MVC 4 Internet 应用程序，在该应用程序中我有注册视图，根据角色的选择它应该能够禁用注册表单中的几个输入字段，

例如：当用户选择高等教育委员会时，它将能够禁用“大学”、“Direct_Number”、“移动”字段

这是我的 CSHTML 代码，包括 Jquery

@model AFFEMS2_HEC.Models.RegisterViewModel

@{
    ViewBag.Title = "HEI_Registration";
    Layout = "~/Views/Shared/_HEI_Registration.cshtml";
}


}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Add New Higher Education Institute</h2>
</hgroup>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <div class="editor-label">
            @Html.LabelFor(model => model.RoleName,"Please Select Type of the Role ")
                <br/>
             </div>
              <div>
                        @Html.DropDownListFor(model => model.RoleName,
                                                      new SelectList(
                                                      new List<Object>{ 
                                                      new { value = "" , text = "Select"  },
                                                      new { value = "HEC_Admin" , text = "Higher Edcuation Council" },
                                                      new { value = "HEI_User" , text = "Higher Education Institute"}
                                                      }, "value", "text", "-"), new { id = "allDay" })
                        @Html.ValidationMessageFor(model => model.RoleName)

                    </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>

                      <div class="editor-label">
            @Html.LabelFor(model => model.University)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.University ,new { id = "University" })
            @Html.ValidationMessageFor(model => model.University)
        </div>

         <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

            <div class="editor-label">
            @Html.LabelFor(model => model.First_Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.First_Name)
            @Html.ValidationMessageFor(model => model.First_Name)
        </div>


        <div class="editor-label">
            @Html.LabelFor(model => model.Last_Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Last_Name)
            @Html.ValidationMessageFor(model => model.Last_Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

                <div class="editor-label">
            @Html.LabelFor(model => model.Direct_Number)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Direct_Number ,new { id = "Direct_Number" })
            @Html.ValidationMessageFor(model => model.Direct_Number)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Mobile)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Mobile ,new { id = "Mobile" })
            @Html.ValidationMessageFor(model => model.Mobile)
        </div>

       <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ConfirmPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </div>


        </ol>
        <input type="submit" value="Register" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $("#allDay").change(function () {
            if ($(this).val() == "HEC_Admin") {
                $("#University").attr("disabled", true);
                $("#Direct_Number").attr("disabled", true);
                $("#Mobile").attr("disabled", true);
            }
            if ($(this).val() == "HEI_User") {
                $("#University").attr("disabled", false);
                $("#Direct_Number").attr("disabled", false);
                $("#Mobile").attr("disabled", false);
            }

        });

    </script>
}

好像没用，谢谢大家帮忙

【问题讨论】：

不相关，但不要这样做@Html.EditorFor(model => model.Mobile ,new { id = "Mobile" })。我假设您认为它设置了 id 属性，但它不是（并且 html 助手将其设置为“Mobile”，所以即使它确实有效，它也只是毫无意义）
它应该是$("#University").prop("disabled", true); - .prop 而不是.attr
你能显示渲染的 html 吗？好像你有 js 问题，并且 js 与剃刀输出一起工作。
您是否将 Jquery 库包含到您的项目中：D？浏览器控制台中的一些错误？
我认为当我们放置 @Scripts.Render("~/bundles/jqueryval") 时它会自动包含 Jquery 库，如果我错了，请纠正我

标签： javascript jquery asp.net-mvc-4 razor

【解决方案1】：

试试这个

           if ($(this).val() == "HEC_Admin") {
                $("#University").attr("disabled", "disabled");
                $("#Direct_Number").attr("disabled", "disabled");
                $("#Mobile").attr("disabled", "disabled");
            }
            if ($(this).val() == "HEI_User") {
                $("#University").removeAttr("disabled");
                $("#Direct_Number").removeAttr("disabled");
                $("#Mobile").removeAttr("disabled");
            }

【讨论】：

【解决方案2】：

首先，Scripts 部分实际上可能会在您的其他内容之前呈现，这取决于您的布局文件。您应该将事件设置包装在文档加载事件处理程序中。

其次，您想使用.prop() jquery 函数，而不是.attr()。 .attr() 仅引用属性的初始状态；基本上是用 HTML 编写的。所以将该脚本替换为：

$(document).ready(function() {
    $("#allDay").change(function () {
        if ($(this).val() == "HEC_Admin") {
            $("#University").prop("disabled", true);
            $("#Direct_Number").prop("disabled", true);
            $("#Mobile").prop("disabled", true);
        }
        if ($(this).val() == "HEI_User") {
            $("#University").prop("disabled", false);
            $("#Direct_Number").prop("disabled", false);
            $("#Mobile").prop("disabled", false);
        }

    });
});

【讨论】：