本文讲解如何解决 DataTables 中多行 Bootstrap Toggle 按钮仅首行响应、其余行无法联动启用的问题，核心是通过事件委托 + 行级作用域定位（$(this).closest('tr')）实现每行「必需复选框」与对应状态按钮的精准绑定。
本文讲解如何解决 datatables 中多行 bootstrap toggle 按钮仅首行响应、其余行无法联动启用的问题，核心是通过事件委托 + 行级作用域定位（`$(this).closest('tr')`）实现每行「必需复选框」与对应状态按钮的精准绑定。
在使用 Bootstrap Toggle 插件配合动态渲染的 DataTables（尤其是从 MySQL 查询后 PHP 循环输出的表格）时，一个常见陷阱是：所有 .required 复选框共用全局逻辑，导致 $(".toggle-disabled")[0] 始终只操作第一行的 Toggle 按钮——这正是你遇到“只有第一行 Status 按钮被启用”的根本原因。
正确做法是将事件处理限制在当前操作行内。当用户勾选/取消某行中的任一 .required 复选框时，我们应：
- 定位该复选框所在的
<tr> 行；<li>判断该行内所有 <code>.required是否全部已勾选； - 仅对该行内的
.toggle-disabled按钮执行启用/禁用操作。 - 使用
change事件替代change keyup：复选框只需监听change，keyup对 checkbox 无意义且可能引发重复触发； - 务必检查
data("bs.toggle")存在性，避免未初始化时报错； - 若表格是通过 AJAX 动态加载（如 DataTables 的 server-side processing），请确保此脚本在表格 DOM 渲染之后执行，或封装为
draw.dt回调函数； - HTML 中每个
.toggle-disabled元素必须位于同一<tr> 内，且不与其他行混淆（禁止跨行嵌套或遗漏 <code>class）； - 如需支持「全选/反选」逻辑，应在对应操作后手动触发
.trigger("change")以激活上述行级校验。
以下是优化后的 JavaScript 代码（兼容 Bootstrap Toggle v2.x）：
$(document).on("change", ".required", function() {
const $row = $(this).closest("tr"); // ✅ 精准获取当前行
const hasUnchecked = $row.find(".required:not(:checked)").length > 0;
// 仅操作本行的 toggle-disabled 按钮
const $toggleBtn = $row.find(".toggle-disabled");
$toggleBtn.prop("disabled", hasUnchecked);
// 若插件已初始化，需同步更新 UI 状态（关键！）
if ($toggleBtn.data("bs.toggle")) {
if (hasUnchecked) {
$toggleBtn.bootstrapToggle("disable");
} else {
$toggleBtn.bootstrapToggle("enable");
}
}
});
⚠️ 重要注意事项：
通过这种基于行上下文的事件处理方式，无论表格有多少行、是否由 PHP/MySQL 动态生成，每行的 Toggle 按钮都能独立、可靠地响应其关联复选框的状态变化，彻底告别「仅第一行生效」的困扰。
