根据条件将文本字段更改为灰色

Question

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

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

Answer 1

你需要像这样使用 jquery 来做到这一点：

<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>

这里是Fiddle DEMO

Answer 2

你可以这样使用：

$('#dropDownElement').change(function(){

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

 })

如果prop('readonly',true); 不起作用，请尝试attr('disabled', 'disabled');