javascript - 在 EditorFor 字段上使用 Javascript？

Question

在 MVC4 中，我有一个 EditorFor 字段，它代表一个 bool 值并呈现为一个复选框，如果勾选了该复选框，我想让其他 EditorFor 字段更改为不可编辑。这在纯 html 中很简单，但使用 Razor 语法我不确定如何执行此操作。

<div class="editor-field">
        @Html.EditorFor(model => model.Draw)
        @Html.ValidationMessageFor(model => model.Draw)
    </div>

<script type="text/javascript">
function validate() {
    if (document.getElementById('@Html.EditorFor(model => model.Draw)').checked) {
        alert("checked")
    } else {
        alert("You didn't check it! Let me check it for you.")
    }
}

试图用那个脚本测试它，但因为我不知道编辑器的 ID，所以我不确定该怎么做。

Answer 1

如果您使用 CheckBoxFor 而不是 EditorFor(它是一个通用帮助程序)，您可以通过方法重载轻松添加 HTML 属性。添加一个 ID 允许您从 JavaScript 访问它。

<div class="editor-field">
    @Html.CheckBoxFor(model => model.Draw, new { ID = "cbxDraw" })
    @Html.ValidationMessageFor(model => model.Draw)
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#cbxDraw').on('change', function() {
        var $cbx = $(this),
            isChecked = $cbx.is(':checked');

        $cbx.closest('.editor-field')
            .siblings()
            .find(':input')
                .prop('disabled', isChecked);
    });
});
</script>

(注:本例使用jQuery)