Datatables Toggle按钮仅首个可启用问题（PHP循环查询MySQL场景）

通过PHP循环MySQL查询数据生成Datatables表格时，存在以下问题：必须勾选所有带.required类的切换按钮后，仅第一行Status列的.toggle-disabled按钮能正常启用，同列其余按钮无法启用；但未使用PHP循环、手动编写表格时该功能完全正常。

相关代码 #

JavaScript 代码 #

$(document).on("change keyup", ".required", function(e) 
{
    let Disabled = $(".required").length;
    $(".required").each(function() 
    {
        if (this.checked) Disabled--;
    });

    if (Disabled) 
    {
        $(".toggle-disabled").prop("disabled", true);
        $(".toggle-disabled")[0].bootstrapToggle('disable');
    } 
    else 
    {
        $(".toggle-disabled").prop("disabled", false);
        $(".toggle-disabled")[0].bootstrapToggle('enable');
    }
});

HTML 表格代码 #

<table id="MyTable" class="table table-responsive table-hover table-striped table-bordered border-primary table-sm align-middle" style="width:100%">
    <thead>
        <tr>                                    
            <th>First Name</th>
            <th>Last Name</th>  
            <th>Gmail</th>
            <th>Pika</th>
            <th style="text-align: center">Status</th>  
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Brahim </td>
            <td>Ameskroud</td>
            <td>                                    
                <input class="form-check-input filled-in box required" type="checkbox" 
                data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
                <label class="form-check-label">No</label>
            </td>
            <td>
                <input class="form-check-input filled-in box required" type="checkbox" 
                data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
                <label class="form-check-label">Yes</label>                                 
            </td>                       
            <!-- Toggle button -->                          
            <td style="text-align: center" >                                    
                <input type="checkbox" name="status" class="toggle-disabled"  data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success"
                data-offstyle="warning" onchange="updateStatus(17)" checked disabled>
            </td>
        </tr>
        <tr>
            <td>Bel Air</td>
            <td>John Baptist</td>
            <td>                                    
                <input class="form-check-input filled-in box required" type="checkbox" 
                data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
                <label class="form-check-label">Yes</label>
            </td>
            <td>
                <input class="form-check-input filled-in box required" type="checkbox" 
                data-toggle="toggle" data-size="xs" data-onlabel="Yes" data-offlabel="No" data-onstyle="success" data-offstyle="info">
                <label class="form-check-label">Yes</label>                                 
            </td>                       
            <!-- Toggle button -->                          
            <td style="text-align: center" >                                    
                <input type="checkbox" name="status" class="toggle-disabled"  data-toggle="toggle" data-size="small" data-onlabel="Done" data-offlabel="Pending" data-onstyle="success"
                data-offstyle="warning" onchange="updateStatus(50)"  disabled>
            </td>
        </tr>
    </tbody>
</table>

解决方案 #

问题出在代码中仅对第一个.toggle-disabled元素调用了bootstrapToggle('disable')和bootstrapToggle('enable')方法（通过[0]索引），而$(".toggle-disabled").prop("disabled", true/false)只是设置了原生DOM的disabled属性，但bootstrapToggle组件需要单独对每个实例调用enable/disable方法才能更新UI状态。

修改后的JavaScript代码如下：

$(document).on("change keyup", ".required", function(e) 
{
    let Disabled = $(".required").length;
    $(".required").each(function() 
    {
        if (this.checked) Disabled--;
    });

    if (Disabled) 
    {
        $(".toggle-disabled").prop("disabled", true).each(function() {
            $(this).bootstrapToggle('disable');
        });
    } 
    else 
    {
        $(".toggle-disabled").prop("disabled", false).each(function() {
            $(this).bootstrapToggle('enable');
        });
    }
});

修改说明 #

• 使用.each()遍历所有.toggle-disabled元素，对每个组件实例调用bootstrapToggle('disable')或bootstrapToggle('enable')，确保所有行的Status按钮都能同步更新启用/禁用状态。
• 链式调用.prop()和.each()，让代码更简洁高效。

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