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

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