复选框控制Div显示隐藏异常求助：jQuery事件绑定无效排查

看起来你遇到的问题是复选框的事件没有正确触发，导致关联的div无法正常显示/隐藏。我来帮你分析下可能的原因，再给出修复后的完整解决方案：

可能的问题点 #

• Html.CheckBoxFor 会生成两个input元素：一个可见的checkbox和一个hidden的input，用来处理MVC中布尔值的绑定逻辑。如果你的选择器只针对#CBAnonymous，有时候可能会因为这个隐藏元素导致事件触发异常。
• 你原来的代码里没有给第二个复选框CBMeeting绑定事件，所以勾选它的时候MeetingTextBox自然不会显示。

修复后的完整代码 #

调整后的HTML和JS代码如下，确保事件正确绑定，同时处理CheckBoxFor的特性：

<div class="col-md-4 sidePad" >
    @Html.Label("Is Anonymous")
    @Html.CheckBoxFor(p => p.IsAnonymous, new { id = "CBAnonymous"})
</div>
<div class="col-md-6" id="MeetingDiv" style="display:none">
    @Html.Label("Is Meeting")
    @Html.CheckBoxFor(p => p.IsMeeting, new { id = "CBMeeting"})
</div>
<div class="col-md-6" id="MeetingTextBox" style="display:none">
    @Html.Label("Meeting Name")
    @Html.TextBoxFor(p => p.MeetingName, new { id = "TBMeetingName"})
</div>

<script>
$(function () {
    // 给CBAnonymous绑定change事件（比click更适配复选框状态变化场景）
    $("#CBAnonymous").change(function () {
        // 用is(":checked")判断状态，处理CheckBoxFor生成的元素更稳定
        if ($(this).is(":checked")) {
            $("#MeetingDiv").show();
        } else {
            $("#MeetingDiv").hide();
            // 联动取消IsMeeting的勾选并隐藏输入框，优化用户体验
            $("#CBMeeting").prop("checked", false);
            $("#MeetingTextBox").hide();
        }
    });

    // 给CBMeeting绑定change事件，实现显示/隐藏MeetingTextBox
    $("#CBMeeting").change(function () {
        if ($(this).is(":checked")) {
            $("#MeetingTextBox").show();
        } else {
            $("#MeetingTextBox").hide();
        }
    });
});
</script>

关键调整说明 #

1. 改用change事件：对于复选框，change事件更贴合"状态变化"的触发逻辑，不会因为点击复选框周围区域误触发。
2. 用is(":checked")判断状态：相比直接取prop("checked")，这个写法在处理CheckBoxFor生成的双input元素时更可靠。
3. 补充CBMeeting的事件绑定：这是你原来代码缺失的核心部分，补上后才能实现勾选IsMeeting显示输入框的需求。
4. 增加联动隐藏逻辑：取消勾选IsAnonymous时，自动重置IsMeeting的状态并隐藏输入框，避免界面出现逻辑不一致的情况。

如果还是有问题，可以检查这几点：

• 确认jQuery已经在你的script代码之前正确引入到页面中。
• 打开浏览器控制台查看是否有报错（比如jQuery未定义的错误）。
• 查看页面渲染后的HTML源码，确认CBAnonymous和CBMeeting的id是否和你设置的一致（MVC辅助方法可能会因为模型前缀改变id）。

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