Why do boxes become checked and then unchecked after clicking a “Check All” button?

Question

I have a JS function here that I'm trying to fix. This function gets triggered when the Check All button is clicked. When this button is clicked, all the items in the table should be checked and disabled. When I run this function and click the Check All button, all the items are selected briefly and then they go back to being unchecked. What am I doing wrong?

PS: I've tried adding e.preventDefault() and the end of the function and it doesn't work

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

How columns are made in html table:

 var table = $('#datatable').DataTable({
    pageLength: 20,
    lengthChange: false,
    language: {
      paginate: {
        previous: '',
        next: ''
      }
    },
    ordering: true,
    processing: true,
    serverSide: true,
    ajax: {
      url: '/table/',
      dataSrc: 'results'
    },
    columns: [
      {
        data: null,
        render: function (data, type, row, meta) {
          let rowHtml = ' '
          return rowHtml
        }
      },
      {
        searchable: true,
        data: 'name'
      }
    ]
  });

user_2379541 · Answer

Hard to tell because I can't actually run your code... but I would put a console.log into the render function just to look when it is being called. My guess would be that your table is being re-rendered before all requests done on your 'change' listener. If that is the case you need to wait all promises end before manually refreshing your page or re-rendering your table... Something like...

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

user_2813224 · Answer

It's not clear as to why all checkboxes need not only to be checked but also disabled. It's also not very clear as what the rest of the code is doing once that "button" is clicked. More importantly, is this

in a ? If so, then it's a possibility that the resets itself (a default behavior at "submit" event)

Putting all of that aside, we can isolate the code into smaller portions. This way we can fix something (ie interactive elements like ) without breaking something else (ie AJAX POST request).

The example below will:

Listen for the "change" event to fire only upon #checkAll
Once triggered, the event handler lockCells() will run.
```
$('#checkAll').on('change', lockCells);
```
lockCells(event) {... passes the Event Object...
...check if #checkAll (this) is .checked or not.
```
let status = this.checked ? true : false;
```
...then collect all within any

and run the .prop() method on each of them.

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

...with the parameters of 'disabled' and 'checked' which Boolean value of true/false determined earlier at step #4

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

It's important to note: while method .attr() is used to manipulate attributes, .prop() is a better choice for properties especially with Boolean values (T/F). Refer to this question for details.

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


 All Cells

Why do boxes become checked and then unchecked after clicking a “Check All” button?

2 Answers