将文本字段更改为灰显，并显示条件

我使用以下代码，该代码是通过MVC5应用程序创建的，我有一个名为Type的字段，它是下拉列表，我需要的是当您更改为Prod时，用户和密码框将灰显，当前通过defult其Dev（下拉列表字段 - 类型）用户和密码字段更改为启用，我应该怎么做？

public class Ad
{
public int ID { get; set; }
public string Name { get; set; }
public string User { get; set; }
public string Password { get; set; }
public IEnumerable<SelectListItem> Type
{
get
{
return new[]
{
new SelectListItem {Value = "D", Text = "Dev"},
new SelectListItem {Value = "p", Text = "Production"}
};
}
}

创建生成的代码

@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Admin</h4>
        <hr />
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>
        <
        <div class="form-group">
            @Html.LabelFor(model => model.User, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.User)
                @Html.ValidationMessageFor(model => model.User)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Type, Model.Type)
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

使用脚本更新了代码

@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
<script type="text/javascript">
    $('select[name="Type"]').change(function () {
        if ($(this).val() === 'Production')
        {
            $('input[name="User"]').prop("disabled",true);
            $('input[name="Password"]').prop("disabled",true);
        }
        else
        {
            $('input[name="User"]').prop("disabled",false);
            $('input[name="Password"]').prop("disabled",false);
        }
    });
</script>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Admin</h4>
        <hr />
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>
        <
        <div class="form-group">
            @Html.LabelFor(model => model.User, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.User)
                @Html.ValidationMessageFor(model => model.User)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Type, Model.Type)
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    $(document).ready(function(){
    $('select[name="Type"]').change(function(){
    if($(this).val() === 'prod')
    {
        $('input[name="User"]').prop("disabled",true);
        $('input[name="Password"]').prop("disabled",true);
    }
        else
        {
        $('input[name="User"]').prop("disabled",false);
        $('input[name="Password"]').prop("disabled",false);
        }
    });
});
</script>

$('#dropDownElement').change(function(){
    if($(this).text() == "Production")
    {
       $('#passwordElement').prop('readonly',true);
       $('#userElement').prop('readonly',true);
    } 
    else
    {
       $('#passwordElement').prop('readonly',false);
       $('#userElement').prop('readonly',false);   
    }
 })