Toggle按钮onclick事件失效，但普通HTML按钮可正常触发

问题原因 #

1. Bootstrap Toggle会将原生<input type="checkbox">隐藏，生成自定义的按钮DOM结构，原生onclick事件无法直接触发。
2. 你的Toggle代码中存在无效HTML属性：直接输出done/pending或Done/Pending作为属性，不符合HTML规范，无法正确控制组件初始状态。
3. 成功回调中操作的是原按钮的id="statusBtn{id}"，但Toggle组件生成的元素并非这个id，导致后续状态更新无效。

修正步骤 #

1. 修复Toggle的HTML代码

移除无效属性，用checked控制初始状态，同时通过data-id存储当前项ID：

<td>      
    <input type="checkbox" 
        data-toggle="toggle" 
        data-size="small" 
        data-onlabel="Done" 
        data-offlabel="Pending" 
        data-onstyle="success" 
        data-offstyle="warning" 
        data-id="<?php echo $comp['id']; ?>"
        <?php echo $comp['status'] == 0 ? 'checked' : ''; ?> />
</td>

说明：$comp['status'] == 0对应"Done"状态，因此checkbox需要checked属性；data-id用于后续事件中获取当前项的ID。

2. 改用jQuery绑定Toggle的change事件

原生事件不生效，直接通过Bootstrap Toggle提供的change事件触发状态更新：

// 页面加载完成后绑定事件
$(function() {
    $('[data-toggle="toggle"]').on('change', function() {
        const id = $(this).data('id');
        updateStatus(id);
    });
});

const updateStatus = function(id) { 
    $.ajax({ 
        type: "POST", 
        url: "do_switch.php", 
        data: { updateId: id }, 
        dataType: "html", 
        success: function(data){ 
            // 找到对应Toggle组件并更新状态
            const toggle = $('[data-id="' + id + '"]');
            if(data == 1) {
                // 状态1对应Pending，设置Toggle为关闭状态
                toggle.bootstrapToggle('off');
            } else if(data == 0) {
                // 状态0对应Done，设置Toggle为开启状态
                toggle.bootstrapToggle('on');
            }
        } 
    }); 
}

3. 可选：同步更新原按钮状态（若保留原按钮）

如果需要同时保留原按钮，在成功回调中同时更新Toggle和原按钮：

success: function(data){ 
    const btn = $("#statusBtn"+id);
    const toggle = $('[data-id="' + id + '"]');
    if(data == 1) { 
        btn.text("Pending");
        toggle.bootstrapToggle('off');
    } else if(data == 0) { 
        btn.text("Done");
        toggle.bootstrapToggle('on');
    } 
}

额外注意事项 #

• 确保已正确引入Bootstrap Toggle的JS和CSS文件（依赖jQuery和Bootstrap）。
• 避免混用原生事件和组件事件，优先使用组件提供的事件API。

内容的提问来源于stack exchange，提问作者Augustine