disable/ enable input fields by drop down selection mvc 4

Question

I'm trying to create ASP.NET MVC 4 Internet Application, in that application I have View for Registration , According to the selection of Role It should be able to disable few input fields in registration form ,

Ex: When user select Higher Education Council , It will be able to disable "University","Direct_Number","Mobile" fields

Here my CSHTML Code including 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>
}

Seems like it doesn't working , Appreciate someone can help

Answer 1

Try this

           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

Firstly, the Scripts section may actually render before your other content, it depends on your layout file. You should wrap the event setup in an on document load event handler.

Secondly, you want to use the .prop() jquery function, instead of .attr() . .attr() references only the initial state of the attribute; what was written in the HTML, basically. So replace that script with:

$(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);
        }

    });
});