本文介绍如何通过 html 结构优化与 jquery 事件控制，实现“同一天内仅允许勾选一个班次”的交互逻辑，避免用户误选多个同日班次，同时保持复选框语义和后端兼容性。

本文介绍如何通过 html 结构优化与 jquery 事件控制，实现“同一天内仅允许勾选一个班次”的交互逻辑，避免用户误选多个同日班次，同时保持复选框语义和后端兼容性。

在课程排期、班次分配等业务场景中，常需约束用户“每天最多选择一个班次”。虽然 更符合单选语义，但因后端已基于 name="batches_alloted[]" 接收复选框数组，且需保留多日跨选能力（如同时选周一和周三），直接改用单选按钮会破坏数据结构兼容性。因此，最佳实践是维持复选框类型，通过前端逻辑实现“按天分组互斥”。

✅ 核心思路：结构分组 + 事件隔离

关键不在识别 label 文本中的“Monday”等关键词（易受国际化、格式变动影响），而在于服务端主动组织 HTML 结构——将属于同一天的 checkbox 归入同一个容器（如

），再通过 jQuery 为每个容器绑定独立的互斥逻辑。

? 前端实现（jQuery）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
$(function() {
  // 为每个 .day-group 内的 checkbox 绑定点击事件
  $('.day-group').on('change', 'input[type="checkbox"]', function() {
    const $group = $(this).closest('.day-group');
    const $checked = $group.find('input[type="checkbox"]:checked');

    // 若当前被勾选，则取消同组其他所有选项
    if (this.checked) {
      $group.find('input[type="checkbox"]').not(this).prop('checked', false);
    }
    // （可选）若当前被取消勾选，且同组无其他勾选项，则不操作；如需强制单选，此处可自动选中第一个
  });
});
</script>

? 服务端 PHP 渲染优化（关键！）

必须修改 PHP 循环逻辑，按 batch_day 字段对结果分组输出：

.day-group