如何根据图书可用数量自动切换状态开关-js教程-PHP中文网

如何根据图书可用数量自动切换状态开关

本文介绍在 laravel 项目中，使用 bootstrap toggle 开关组件时，根据“可用图书数”动态控制开关状态的完整实现方案：当可用数量为 0 时强制设为 inactive（不可用），否则设为 active，并同步更新 ui 与后端。

本文介绍在 laravel 项目中，使用 bootstrap toggle 开关组件时，根据“可用图书数”动态控制开关状态的完整实现方案：当可用数量为 0 时强制设为 inactive（不可用），否则设为 active，并同步更新 ui 与后端。

在实际业务中，图书的状态（Active/Inactive）不应仅由用户手动切换决定，而需受业务规则约束——例如：当可借阅数量为 0 时，该图书应自动禁用，禁止被借阅；一旦有库存恢复，则允许重新启用。这既保障数据一致性，也提升用户体验。

要实现这一逻辑，关键在于在用户触发开关前，先读取当前行的可用数量（Available: X），并据此覆盖用户的操作意图。以下是优化后的完整前端逻辑：

@foreach($booksData as $book)
<td id="total">
    {{ $book->number_books }}
    <br><h6 class="text-success" data-id="{{ $book->id }}">
        Available: {{ max(0, $book->number_books - $book->number_borrowedbooks) }}
    </h6>
</td>
<td style="width: 25px;">
    <input type="checkbox" class="toggle-class" data-id="{{ $book->id }}" data-forwhat="books" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="Inactive">number_books - $book->number_borrowedbooks) > 0 ? ($book->status ? 'checked' : '') : '' }}>
</td>
@endforeach

✅ 注意：初始渲染时，若 Available ≤ 0，则不添加 checked 属性，确保开关默认处于 Inactive 状态。

接着，更新 JavaScript 逻辑，在 AJAX 请求前插入可用性校验：

jQuery(document).ready(function ($) {
    console.log('jQuery and Bootstrap Toggle are loaded!');

    $('.toggle-class').change(function () {
        const $toggle = $(this);
        const id = $toggle.data('id');
        const forwhat = $toggle.data('forwhat') || 'books';
        const token = $('meta[name="csrf-token"]').attr('content');

        // ? 提取当前行“Available: N”中的数字
        const $availabilityEl = $toggle.closest('tr').find('.text-success') || 
                                $toggle.closest('td').prev().find('.text-success');
        const availableText = $availabilityEl.text();
        const availableMatch = availableText.match(/Available:\s*(\d+)/i);
        const available = availableMatch ? parseInt(availableMatch[1], 10) : 0;

        let status;
        if (available === 0) {
            status = 0;
            $toggle.bootstrapToggle('off'); // 强制视觉关闭
            console.warn(`Book ID ${id}: Available = 0 → auto-disabled`);
        } else {
            status = 1;
            $toggle.bootstrapToggle('on'); // 强制视觉开启
        }

        // ? 发起状态更新请求（后端仍需做二次校验！）
        $.ajax({
            type: "POST", // 建议改为 POST，更符合 REST 规范
            dataType: "json",
            url: '/changeStatus',
            data: {
                status,
                id,
                forwhat,
                _token: token,
                _method: 'PATCH' // 若路由定义为 resourceful，建议用 PATCH
            },
            success: function (data) {
                console.log('Status updated:', data.message || 'Success');
                // 可选：显示 Toast 提示
                // toastr.success(data.message || 'Status updated successfully');
            },
            error: function (xhr) {
                console.error('Update failed:', xhr.responseJSON?.message || xhr.statusText);
                // 恢复开关至原状态（防止 UI 与服务端不一致）
                $toggle.bootstrapToggle(status ? 'on' : 'off');
            }
        });
    });
});

? 重要注意事项：

服务端必须重复校验：前端逻辑可被绕过，因此 /changeStatus 接口务必再次检查 available 并拒绝非法激活请求；
DOM 定位健壮性：使用 $toggle.closest('tr').find(...) 更可靠（假设表格结构为 <tr> <td>...</td> <td>...</td> </tr>），避免因 HTML 结构微调导致选择器失效；
初始状态一致性：模板中已通过 {{ ($book->number_books - $book->number_borrowedbooks) > 0 ? ... }} 控制默认 checked，确保首屏渲染即符合业务规则；
用户体验优化：可在 available === 0 时禁用开关（$toggle.prop('disabled', true)），并添加 Tooltip 提示“库存为 0，无法启用”。