How to Enable/disable textbox based on Drop down list change

Hi Kp,

try this code

@model School.Models.Registration
@{
ViewBag.Title = "RegistrationForm";
}
<h2>RegistrationFormh2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Registrationh4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Gender, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Gender, new List<SelectListItem>
{
new SelectListItem { Value = "0", Text = "Select" },
new SelectListItem{Value="1",Text="Male"},
new SelectListItem{Value="2",Text="Female"}
}, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Gender)
div>
Textbox :
<div class="col-md-10">
@Html.EditorFor(model=>model.Email)
@Html.ValidationMessageFor(model => model.Gender)
div>
div>
div>
}
<div>
@Html.ActionLink("Back to List", "Index")
div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script>
$("#Gender").change(function () {
if($('#Gender').val()=="1")
{
$('#Email').hide();
}
else
{
$('#Email').show();
}
});
script>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Ramesh Palanivel9y ago
Accepted answer
Hi Kp,

try this code
@model School.Models.Registration

@{
    ViewBag.Title = "RegistrationForm";
}

<h2>RegistrationFormh2>


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

    <div class="form-horizontal">
        <h4>Registrationh4>
        <hr />
        @Html.ValidationSummary(true)



        <div class="form-group">
            @Html.LabelFor(model => model.Gender, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Gender, new List<SelectListItem>
               {
                   new SelectListItem { Value = "0", Text = "Select" },
                   new SelectListItem{Value="1",Text="Male"},
                    new SelectListItem{Value="2",Text="Female"}
                }, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Gender)
            div>

          Textbox :
            <div class="col-md-10">
               @Html.EditorFor(model=>model.Email)
                @Html.ValidationMessageFor(model => model.Gender)
            div>

        div>


    div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script>
    $("#Gender").change(function () {

        if($('#Gender').val()=="1")
        {
            $('#Email').hide();
        }
        else
        {
            $('#Email').show();
        }
    });
script>
+1