通過下拉選擇mvc 4禁用/啟用輸入字段

Question

我正在嘗試創建ASP.NET MVC 4 Internet應用程序，在該應用程序中，我具有View for Registration，根據Role的選擇，它應該能夠禁用Registration形式的幾個輸入字段，

例如：當用戶選擇“高等教育理事會”時，將可以禁用“大學”，“ 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>
}

似乎不起作用，感謝某人可以提供幫助

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部分實際上可能在其他內容之前渲染，這取決於您的布局文件。 您應該將事件設置包裝在文檔加載事件處理程序中。

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

    });
});