Question

我有这个观点：

<div class="editor-field">Best</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.Best, new List<SelectListItem>
    {
        new SelectListItem { Value = "Best3", Text = "Best 3"},
        new SelectListItem { Value = "Best5", Text = "Best 5"},
        new SelectListItem { Value = "Best10", Text = "Best 10"},
        new SelectListItem { Value = "XBest", Text = "X Best"}
    },
    new { @class = "myselect" })
    @Html.ValidationMessageFor(model => model.Best)
</div> 
<div class="editor-label">X</div>
<div class="editor-field">
    @Html.EditorFor(model => model.X)
    @Html.ValidationMessageFor(model => model.X)
</div>

我有这个jquery：

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
});

它可以工作，但当我转到此视图时，EditorFor X始终可见，只有在我开始单击下拉列表的值时才会更改。我的问题是，在访问视图时它是如何保持隐藏状态的，只在点击时显示。

Answer 1

您需要在绑定事件后立即执行change()事件，如下所示。

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
}).change(); // auto execute

在点击下拉列表MVC 4上显示/隐藏

1 个答案: