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

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

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

这里是我的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>
}

@model AFFEMS2\u HEC.Models.RegisterViewModel
@{
ViewBag.Title=“HEI_注册”；
Layout=“~/Views/Shared/\u HEI\u Registration.cshtml”；
}
}
@ViewBag.Title。
新增高等教育学院
@使用（Html.BeginForm（））{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（）
登记表
@LabelFor（model=>model.RoleName，“请选择角色类型”）


@Html.DropDownListFor（model=>model.RoleName，
新选择列表(
新列表{
新建{value=”“，text=“Select”}，
新的{value=“HEC_Admin”，text=“高等教育委员会”}，
新{value=“HEI_User”，text=“Higher Education Institute”}
}，“值”，“文本”，“-”，新的{id=“allDay”}）
@Html.ValidationMessageFor（model=>model.RoleName）
@LabelFor（model=>model.UserName）
@EditorFor（model=>model.UserName）
@Html.ValidationMessageFor（model=>model.UserName）
@LabelFor（model=>model.University）
@EditorFor（model=>model.University，新{id=“University”}）
@Html.ValidationMessageFor（model=>model.University）
@LabelFor（model=>model.Title）
@EditorFor（model=>model.Title）
@Html.ValidationMessageFor（model=>model.Title）
@LabelFor（model=>model.First_Name）
@EditorFor（model=>model.First_Name）
@Html.ValidationMessageFor（model=>model.First_Name）
@LabelFor（model=>model.Last_Name）
@EditorFor（model=>model.Last_Name）
@Html.ValidationMessageFor（model=>model.Last_Name）
@LabelFor（model=>model.Email）
@EditorFor（model=>model.Email）
@Html.ValidationMessageFor（model=>model.Email）
@LabelFor（model=>model.Direct\u编号）
@EditorFor（model=>model.Direct\u Number，新的{id=“Direct\u Number”}）
@Html.ValidationMessageFor（model=>model.Direct\u编号）
@LabelFor（model=>model.Mobile）
@EditorFor（model=>model.Mobile，新的{id=“Mobile”}）
@Html.ValidationMessageFor（model=>model.Mobile）
@LabelFor（model=>model.Password）
@EditorFor（model=>model.Password）
@Html.ValidationMessageFor（model=>model.Password）
@LabelFor（model=>model.ConfirmPassword）
@EditorFor（model=>model.ConfirmPassword）
@Html.ValidationMessageFor（model=>model.ConfirmPassword）
}
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
$（“#全天”）。更改（函数（）{
如果（$（this.val（）=“HEC_Admin”）{
$（“大学”）.attr（“残疾”，真实）；
$（“#直接号码”）.attr（“禁用”，真）；
$（“Mobile”）.attr（“disabled”，true）；
}
if（$（this.val（）=“HEI_User”）{
$（“#大学”）.attr（“残疾”，假）；
$（“#直接#u编号”）.attr（“禁用”，false）；
$（“Mobile”）.attr（“disabled”，false）；
}
});
}

好像不管用，感谢有人能帮上忙

试试这个

           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");
            }

---

首先，

脚本

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

其次，您希望使用

.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);
        }

    });
});

---

不相关，但不执行

@Html.EditorFor（model=>model.Mobile，new{id=“Mobile”}）

。我假设您认为它设置了

id

属性，但它不是（html助手将它设置为“Mobile”，所以即使它确实工作了，也没有意义），它应该是

$（“#University”）.prop（“disabled”，true）

-

.prop

不是

.attr

可以显示渲染的html吗？似乎您有js问题，js使用razor输出。您是否将Jquery库包含到您的项目中：D？浏览器控制台中的一些错误？我想当我们放置@Scripts.Render（“~/bundles/jqueryval”）时，它会自动包含Jquery库，如果我错了，请纠正我