Bootstrap 5 表格中开关应使用 form-check 实现，需包裹在 td 内、含正确配对的 input[type="checkbox"] 和 label，添加 form-switch 类及 role="switch"；状态变更须通过 API 同步，监听 change 事件并配合 data-id 发送请求，成功后更新本地状态，失败则回滚。
Bootstrap 5 表格里放开关，用 form-check 最稳
Bootstrap 自带的开关（form-check-input + form-check-label）不是纯视觉组件，而是语义化表单控件，能绑定 change 事件、参与表单提交、支持键盘操作——后台表格状态切换正需要这种「可交互+可编程」能力。别用 div 模拟开关，否则 accessibility 和事件监听都会出问题。
关键点：
-
form-check必须包裹在td内，且内部结构要完整：一个input[type="checkbox"]+ 一个label，for和id要配对 - 加
form-switch类才能显示为滑动式开关（默认是复选框样式） - 禁用状态要用
disabled属性，不要只靠 CSS 灰掉 - 后台数据初始状态必须通过
checked属性同步，不能靠 JS 后续 setAttribute
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="status-123" data-id="123"
<?php echo $item['is_active'] ? 'checked' : ''; ?>>
<label class="form-check-label" for="status-123"></label>
</div>
</td>
监听开关变化并调用 API，别直接改 DOM
用户点开关只是触发动作，真实状态变更必须走后端接口。常见错误是点了就立刻 input.checked = !input.checked，结果网络失败或权限不足时 UI 和数据已不一致。
正确做法：
- 用
addEventListener('change', ...)监听，不是click - 拿到
event.target的data-id和新checked值，发 PATCH 请求到对应资源（如/api/users/123） - 请求成功后再更新本地状态；失败则立即
input.checked = !input.checked回滚，并提示错误 - 发送中加
input.disabled = true防重复点击，响应后恢复
批量操作时开关状态不同步？检查 data-id 和事件委托
表格行数多时，给每个开关单独绑事件会浪费内存。用事件委托更合理，但容易漏掉 data-id 提取逻辑。
典型坑：
- 父容器用
tbody委托，但event.target是label而非input，导致拿不到data-id - 解决方案：用
event.target.closest('.form-check-input')定位输入框，再读其dataset.id - 如果开关是动态渲染（比如分页后追加），委托必须绑定在静态父节点（如
table或document），不能绑在旧tbody
移动端点不灵？补上 role="switch" 和触摸适配
Bootstrap 5 的 form-switch 在 iOS Safari 和部分安卓浏览器上可能响应迟钝，尤其表格密集时。
两个硬性补救措施：
- 确保
input有role="switch"—— 这不是可选属性，是让屏幕阅读器和触摸层识别为开关的关键 - 给
label加style="cursor: pointer;"（或全局 CSS），避免某些安卓 WebView 忽略 label 区域点击 - 不要给
td设padding: 0或过小高度，至少留 44px 垂直空间满足触控最小尺寸
复杂点在于：开关本身不存业务状态，它只是触发器。状态一致性完全依赖接口幂等性和前端回滚逻辑——这点容易被忽略，直到用户反馈“我关了又刷一下变回开了”。
