为什么在单击“全选”按钮后，复选框会被选中，然后又被取消选中？

Question

我在这里尝试修复一个 JS 函数。单击“检查全部”按钮时会触发此功能。单击此按钮时，应选中并禁用表中的所有项目。当我运行此功能并单击 Check All 按钮时，所有项目都被短暂选中，然后它们又回到未选中状态。我做错了什么？

PS：我尝试添加 e.preventDefault() 和末尾 功能和它不起作用

$(document).ready(function () {
        $('body').on('change', '#checkAll', function (e) {
            if(this.checked){
                let boxes = $("input.promo-action-checkbox");
                boxes.toArray().forEach(element => {
                    console.log(element);
                    $(element).attr('disabled', 'disabled');
                    var name = $(element).data('name');
                    var number = $(element).data('number');
                    var user = $(element).data('user');
                    $.ajax({
                        method: 'post',
                        url: '/checker',
                        contentType: "application/json",
                        data: JSON.stringify({
                            name: name,
                            number: number,
                            user: user
                        }),
                        dataType: 'json',
                        error: function () {
                            $(element).attr('disabled', '');
                        }
                        })
                    
                });

html表格中的列是如何组成的：

 var table = $('#datatable').DataTable({
    pageLength: 20,
    lengthChange: false,
    language: {
      paginate: {
        previous: '<i class=\'fas fa-angle-left\'>',
        next: '<i class=\'fas fa-angle-right\'>'
      }
    },
    ordering: true,
    processing: true,
    serverSide: true,
    ajax: {
      url: '/table/',
      dataSrc: 'results'
    },
    columns: [
      {
        data: null,
        render: function (data, type, row, meta) {
          let rowHtml = '<div class="custom-control custom-checkbox mb-3"> <input class="custom-control-input promo-action-checkbox" id="checkbox-' + meta.row + '"  data-name="' + row.name + '" data-phone="' + row.number + '" data-admin="' + row.user + '" type="checkbox"'
          if (row.fulfilled) {
            rowHtml += ' disabled checked'
          }
          rowHtml += '> <label class="custom-control-label"  for="checkbox-' + meta.row + '"></label></div>'
          return rowHtml
        }
      },
      {
        searchable: true,
        data: 'name'
      }
    ]
  });

这是可行的，但是“checkAll”框没有被勾选。此表也不在表单内。

$('#checkAll').click(function (e) {
 e.preventDefault()
    $('input.action-checkbox').prop('checked', this.checked);  
    $('input.action-checkbox').prop('disabled', true);
    return false;
})

表结构：

        <div class="table-responsive">
            <table class="table align-items-center table-flush table-striped" id="datatable-promo-code">
                <thead class="thead-light">
                <tr>
                    <th>Check All <input id = "checkAll"  type= "checkbox"></th>
                    <th>Name</th>
                    <th>Info</th>
                    <th>address</th>
                    <th>Email</th>
                    <th>Number</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>

Answer 1

很难说，因为我实际上无法运行您的代码...但我会将 console.log 放入渲染函数中，只是为了查看它何时被调用。我的猜测是，在您的 'change' 侦听器完成所有请求之前，您的表正在重新渲染。如果是这种情况，您需要等待所有承诺结束，然后再手动刷新页面或重新呈现表格......类似......

$(document).ready(function () {
  $('body').on('change', '#checkAll', async function (e) {
    if(this.checked) {
      let boxes = $("input.promo-action-checkbox");
      const promises = boxes.toArray().map(element => {
        return new Promise(function (resolve, reject) {
          $(element).attr('disabled', 'disabled');
          var name = $(element).data('name');
          var number = $(element).data('number');
          var user = $(element).data('user');
          $.ajax({
              method: 'post',
              url: '/checker',
              contentType: "application/json",
              data: JSON.stringify({
                  name: name,
                  number: number,
                  user: user
              }),
              dataType: 'json',
              error: function () {
                  $(element).attr('disabled', '');
                  reject();
              },
              success: function() {
                resolve()
              }
          });
        });
      });

      await Promise.all(promises);
      // refresh the page
      document.location.reload()
      // or re-render your table... no ideia how to that though...
      someMagicFunctionToReRenderYourTable()
    }
  });
});

Answer 2

目前尚不清楚为什么所有复选框不仅需要被选中而且还需要禁用。单击 "button" 后，其余代码在做什么也不是很清楚。更重要的是，这是<table> 在<form> 中吗？如果是这样，那么<form> 可能会自行重置（“提交”事件的默认行为）

抛开所有这些，我们可以将代码隔离成更小的部分。这样我们就可以在不破坏其他内容（即 AJAX POST 请求）的情况下修复某些内容（即像 <input> 这样的交互式元素）。

下面的例子将：

1. 监听“change”事件以触发仅#checkAll
2. 一旦触发，事件处理程序lockCells() 将运行。

   $('#checkAll').on('change', lockCells);
   

3. lockCells(event) {... 传递 Event Object...
4. ...检查#checkAll (this) 是否为.checked。

   let status = this.checked ? true : false;
   

5. ...然后收集任何<table> 中的所有<input> 并在每个.prop() 上运行方法。

    $('table input').prop(...)
   

6. ...带有“已禁用”和“已检查”的参数，在第 4 步之前确定的真/假布尔值

   {
     'disabled': status,
     'checked': status
   }
   

重要的是要注意：虽然方法.attr() 用于操作属性，但.prop() 是属性的更好选择，尤其是具有布尔值（T/F）的属性。详情请参考question。

$('#checkAll').on('change', lockCells);

function lockCells(event) {
  let status = this.checked ? true : false;
  $('table input').prop({
    'disabled': status,
    'checked': status
  });
};

label {
  display: inline-block;
  padding: 3px 5px;
  border: 1px inset grey;
  border-radius: 6px;
  margin: 5px 10px;
  float: right;
  cursor: pointer;
}

label::before {
  content: 'Disable ';
}

#checkAll:checked+label::before {
  content: 'Enable ';
}

table input {
  display: block;
  width: 10ch;
}

<input id='checkAll' type='checkbox' hidden>
<label for='checkAll'> All Cells</label>
<table>
  <tbody>
    <tr>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
    </tr>

    <tr>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
    </tr>

    <tr>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
    </tr>

    <tr>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
      <td><input type='checkbox'></td>
    </tr>

  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>