当我查询 mysql 时，我的数据表切换按钮不会启用，只有第一个按钮被启用

My Datatables Toggle Buttons won't get enabled when I am querying mysql, only the first gets enabled

提问人：Augustine 提问时间：11/16/2023 最后编辑：Augustine 更新时间：11/16/2023 访问量：48

问：

我从 Stackoverflow 那里得到了很多帮助（非常感谢）。 我在这里遇到的问题是，我必须单击数据表上的所有切换按钮才能最终启用第一行（状态）上的第一个切换按钮，而不是（状态）列上的其余部分，当我不使用 PHP 循环时，我已经让它工作了...... 请参阅屏幕截图和代码：

            $(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');
            }
            });

            <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>
            <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>
javascript php html jquery

评论

0赞 Barmar 11/16/2023
你不需要循环。let Disabled = $(".required:not(:checked))").length;
0赞 Barmar 11/16/2023
目前尚不清楚您想做什么。 只是第一个切换按钮，这就是作用（你为什么要把它放在引号里？$(".toggle-disabled")["0"][0]
0赞 Augustine 11/16/2023
@Barmar我需要一个循环来从 Mysql 表中获取这些 Yes 和 No ！我尝试了您的建议“let Disabled = $（”.required：not（：checked））“）.length;”不起作用，[“0”] 在有或没有引号的情况下都可以正常工作，但只有在勾选所有可用的切换框后，它才会启用“状态”列上的第一个元素。
0赞 Barmar 11/16/2023
我说的是这个循环：$(".required").each(function() { if (this.checked) Disabled--; });
0赞 Barmar 11/16/2023
目前还不清楚你在问什么。问题出在 JavaScript 还是 PHP 中？

答：

1赞 Barmar 11/16/2023 #1

用于获取事件目标所在的行。然后，您可以在同一行中找到复选框和切换按钮。$(this).closest('tr')

$(document).on("change keyup", ".required", function() {
  let row = $(this).closest("tr");
  let disabled = row.find(".required:not(:checked)").length > 0;
  row.find(".toggle-disabled").prop("disabled", disabled);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" checked disabled>
      </td>
      <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" disabled>
        </td>
      </tr>
  </tbody>
</table>

评论

0赞 Augustine 11/16/2023
不幸的是，现在，即使是之前工作的状态上的第一个按钮也没有启用！我的JS有些不对劲！
0赞 Barmar 11/16/2023
你能发布示例 HTML 而不是生成它的 PHP 吗，这样我就可以测试我的代码了吗？
0赞 Augustine 11/16/2023
代码已更新以包含一些数据。
0赞 Barmar 11/16/2023
你为什么要删除你的 JavaScript？怎么会有人知道我在原始代码中修复了什么问题？
0赞 Augustine 11/16/2023
我的坏，我必须过度它..我把它恢复了..谢谢。！

上一个：如何使变量取自 data-id on 按钮

下一个：从 ashx 文件上传 img [已关闭]