Question

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

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

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

似乎它没有工作，感谢有人可以提供帮助

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

Answer 2

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

其次，您希望使用.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);
        }

    });
});

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

2 个答案: