Razor ASP.NET 如何用jQuery实现勾选复选框时显示对应文本框

问题原因 #

你的代码失效主要有两个核心问题：

• 变量作用域异常：循环中用var声明的i属于全局作用域，点击事件触发时循环已经执行完成，i最终值为@Model.disciplinas.Count，无法匹配到对应id的文本框元素。
• 冗余属性冲突：复选框上声明了@onclick = "addbox();"属性，但你没有定义addbox函数，运行时会抛出未定义错误，阻断逻辑执行。

修复方案 #

第一步：清理视图冗余属性 #

删除复选框的onclick绑定，修改后代码如下：

<div class="col-md-10 " style="padding-left:20px">
    @for (var i = 0; i < Model.disciplinas.Count; i++)
    {
        @Html.CheckBoxFor(m => m.disciplinas[i].Selected, htmlAttributes: new { @id = "myCheck" + i })
        @Html.HiddenFor(m => m.disciplinas[i].Text)
        @Html.HiddenFor(m => m.disciplinas[i].Value)
        <span>@Model.disciplinas[i].Text</span>
        @Html.TextBoxFor(m => m.disciplinas[i].Quantity, htmlAttributes: new { @id = "area" + i, @style = "display: none;" })
        <br>
    }
</div>

第二步：替换为更简洁的jQuery实现 #

利用jQuery的选择器和事件绑定能力，不需要循环绑定事件，代码如下：

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 匹配所有id前缀为myCheck的复选框，绑定状态变更事件
        $('input[id^="myCheck"]').on('change', function() {
            // 提取当前复选框的序号
            const idx = this.id.replace('myCheck', '');
            // 根据复选框勾选状态切换对应文本框显隐
            $('#area' + idx).toggle(this.checked);
        });
    </script>
}

说明：toggle()方法传入布尔值时，值为true显示元素，为false隐藏元素，刚好和复选框的checked属性状态匹配，同时change事件支持鼠标、键盘两种勾选触发场景，兼容性更好。

内容的提问来源于stack exchange，提问作者Marto_999