如何在Razor MVC中用CheckBoxFor结合jQuery禁用/启用TextBoxFor？

算力阿峰

2026-5-28

解决Razor中CheckBoxFor控制TextBoxFor禁用/启用的问题

你完全不需要给CheckBoxFor添加onclick属性！你的思路是对的，但脚本里的jQuery选择器犯了个常见小错误，修正一下就能正常工作了。

问题出在哪？

jQuery中通过id查找元素时，必须在id前加上#前缀，你原来的脚本里直接写$('ResYearChecked')和$("SearchResYear")，jQuery会把它们当成标签名去查找（比如像查找<div>标签那样），自然找不到你的复选框和文本框，所以事件监听根本没生效。

修正后的完整代码

首先是Razor部分：其实你不需要手动指定Name属性，CheckBoxFor和TextBoxFor会自动根据模型属性生成对应的name和id，这对后续表单提交绑定模型更友好。当然如果有特殊需求保留手动设置也没问题：

@Html.CheckBoxFor(m => m.ResYearChecked, new { id = "ResYearChecked" }) 
@Html.LabelFor(m => m.ResYearChecked, "启用年份搜索")
@Html.TextBoxFor(m => m.SearchResYear, new { id = "SearchResYear" })

然后是修正后的JavaScript脚本，建议把代码放在$(document).ready()里，确保DOM元素加载完成后再绑定事件，同时加上初始状态设置，避免页面加载时文本框状态和复选框不一致：

<script>
$(document).ready(function() {
    // 页面加载时，根据复选框的初始状态设置文本框是否禁用
    $("#SearchResYear").prop("disabled", !$("#ResYearChecked").is(':checked'));

    // 监听复选框的change事件，动态切换文本框状态
    $("#ResYearChecked").change(function () {
        $("#SearchResYear").prop("disabled", !$(this).is(':checked'));
    });
});
</script>