在EditorFor Fields上使用Javascript？

Question

在MVC4中,我有一个EditorFor字段,它表示一个布尔值并呈现为一个复选框,如果选中该复选框,我想让其他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

ASP.NET MVC 4提供了新的NameExtensions类IdFor和NameFor方法.你可以像这样使用它:

document.getElementById('@Html.IdFor(model => model.Draw)')

Answer 2

如果使用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)