本文介绍在 laravel 项目中，使用 bootstrap toggle 开关组件时，如何根据“可借阅数量”（available）动态禁用或强制设置开关状态：当可用数为 0 时自动设为 inactive 并禁用交互，否则允许正常切换。
本文介绍在 laravel 项目中，使用 bootstrap toggle 开关组件时，如何根据“可借阅数量”（available）动态禁用或强制设置开关状态：当可用数为 0 时自动设为 inactive 并禁用交互，否则允许正常切换。
在实际图书管理系统中，仅靠用户手动切换状态存在逻辑漏洞——例如，当某本书已全部借出（Available: 0），其状态理应不可激活（Active），否则将导致业务矛盾。因此，需在前端增强校验逻辑，实现「可用数归零 → 状态强制为 Inactive 且不可操作」的自动化约束。
以下是优化后的完整 JavaScript 实现（集成于原有 Blade 模板中）：
<script>
jQuery(document).ready(function ($) {
console.log('jQuery is loaded!');
$('.toggle-class').each(function () {
// 初始化：根据 available 数值预设开关状态与禁用状态
const $toggle = $(this);
const $availableEl = $toggle.closest('tr').find('.text-success'); // 更健壮的选择器：定位到同一行
const availableText = $availableEl.text();
const availableMatch = availableText.match(/Available:\s*(\d+)/);
const available = availableMatch ? parseInt(availableMatch[1], 10) : 0;
if (available === 0) {
$toggle.bootstrapToggle('off');
$toggle.prop('disabled', true).closest('td').addClass('text-muted');
$toggle.siblings('span').addClass('disabled'); // 隐藏 toggle 视觉控件（可选）
}
});
$('.toggle-class').change(function (e) {
const $toggle = $(this);
const availableEl = $toggle.closest('tr').find('.text-success');
const availableText = availableEl.text();
const availableMatch = availableText.match(/Available:\s*(\d+)/);
const available = availableMatch ? parseInt(availableMatch[1], 10) : 0;
// ✅ 关键逻辑：可用数为 0 时，阻止变更并重置状态
if (available === 0) {
e.preventDefault();
$toggle.bootstrapToggle('off');
return;
}
// 正常处理 Active/Inactive 切换
const status = $toggle.prop('checked') ? 1 : 0;
const forwhat = $toggle.data('forwhat') || 'books';
const id = $toggle.data('id');
const token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: "POST", // ✅ 强烈建议改为 POST，符合 RESTful 规范 & 防 CSRF
dataType: "json",
url: '/changeStatus',
data: {
status,
id,
forwhat,
_token: token
},
success: function (data) {
console.log('Status updated:', data.success);
// 可选：显示 Toast 提示
},
error: function (xhr) {
console.error('Failed to update status:', xhr.responseJSON?.message || xhr.statusText);
// 恢复开关至原状态（防错）
$toggle.bootstrapToggle(status ? 'on' : 'off');
}
});
});
});
</script>
关键改进说明：
- ✅ 初始化校验：页面加载时即扫描所有开关，依据
Available: X文本解析数值，对X === 0的项自动设为off并disabled，视觉上灰显； - ✅ 变更拦截：
change事件中再次校验可用数，若为 0 则调用e.preventDefault()阻止默认行为，并强制off，杜绝误操作； - ✅ 选择器健壮性提升：使用
.closest('tr')替代.closest('td')，确保在复杂表格结构中仍能准确定位同行的Available元素； - ✅ HTTP 方法修正：将 AJAX 请求从
GET改为POST，避免敏感状态变更暴露于 URL，同时更契合 CSRF 保护机制； - ✅ 错误回滚机制：AJAX 失败时自动恢复开关状态，保障 UI 与后端一致性。
后端配合建议（Laravel Controller）：
请确保 /changeStatus 接口同步校验业务规则（如：不允许对 available === 0 的书籍启用 Active），实现前后端双重防护，避免绕过前端的恶意请求。
通过以上改造，系统不仅满足了“可用即活跃、无货即停用”的业务语义，也显著提升了用户体验与数据可靠性。
