
本文介绍如何通过 html 结构优化与 jquery 脚本协同,为动态生成的课程班次复选框实现“每星期仅允许选择一个班次”的交互约束,避免用户误选同一天多个时段。
本文介绍如何通过 html 结构优化与 jquery 脚本协同,为动态生成的课程班次复选框实现“每星期仅允许选择一个班次”的交互约束,避免用户误选同一天多个时段。
在课程排期、培训批次分配等业务场景中,常需限制用户“每天最多选择一个班次”。虽然语义上更推荐使用 单选按钮,但因历史表单结构、后端兼容性或 UI 设计原因,有时必须沿用 。此时,需通过前端逻辑模拟“单选组”行为——即:当用户勾选某一周几(如 Monday)的班次时,自动取消并禁用同属该周几的其他所有班次复选框。
关键在于按星期分类组织 DOM 结构,而非依赖标签文本内容实时匹配(后者性能差且易出错)。推荐方案是:服务端在渲染时,将同属一天的班次包裹进独立容器(如 ✅ 推荐实现方式(结构化 + 可维护)
1. PHP 渲染层:按
batch_day 分组输出label.textContent










