前端 - Javascript 运行并返回错误后恢复复选框状态?

Question

我有一个简单的表格，其中一个单元格中有一个复选框 - 当用户单击复选框时，它会调用一个脚本，该脚本会调用 php 文件来更新数据库。一切运行良好。

如果 php 脚本出现错误或返回错误，我想将复选框恢复到用户单击之前的原始选中状态。我以为下面的代码可以做到这一点，但它没有做出任何改变：

if (checkedState === 'true') {
  $this.attr('checked', false);
} else { 
  $this.attr('checked', true);
}

我已附加完整的脚本，除了上面尝试将复选框恢复到其原始选中状态的部分外，该脚本均可正常工作。

$(document).ready(function() {
  $("input.select-item").click(function() {
    //console.log( 'starting Checklist Item Update' );
    var recid = $(this).closest('td').attr('id');
    var checkedState = $(this).is(":checked");
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateItem.php', {
      type: 'updateItem',
      recid: recid,
      selectionType: checkedState
    }, function(data) {
      data = JSON.parse(data);
      //console.log( data );
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Completed Checklist Item - ' + ajaxError + '. Please contact the Developer';
        $this.closest('td').addClass("table-danger");

        // Restore checkbox to it's original state
        if (checkedState === 'true') {
          $this.attr('checked', false);
        } else {
          $this.attr('checked', true);
        }
        //display AJAX error details
        $("#updateSelectionsErrorMessage").html(errorAlert);
        $("#updateSelectionsError").show();
        return; // stop executing this function any further
      } else {
        $this.closest('td').addClass("table-success")
        $this.closest('td').removeClass("table-danger");

        // Restore checkbox to it's original state
        if (checkedState == true) {
          $this.attr('checked', false);
        } else {
          $this.attr('checked', true);
        }
      }
    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating the Completed Checklist Item - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Developer';
      $this.closest('td').addClass("table-danger");
      //display AJAX error details
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
      $this.attr('checked', false); // Unchecks it
    });
  });
});

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

<table class="table table-striped table-hover table-bordered">
  <thead>
    <th style="width: 20%" scope="col">Category</th>
    <th style="width: 60%" scope="col">Description</th>
    <th style="width: 10%" scope="col">Completed</th>
    <th style="width: 10%" scope="col">Check</th>
  </thead>
  <tbody>
    <tr id="1">
      <td>Main</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>1</td>
      <td id="1"><input type="checkbox" class="select-item checkbox" name="select-item" value="1"></td>
    </tr>
  </tbody>
</table>

Answer 1

<script type="text/javascript">
  $(document).ready(function () {
    $("input.select-item").click(function () {
      var recid = $(this).closest("td").attr("id");
      var checkedState = $(this).is(":checked"); // Ini boolean (true/false)
      var $this = $(this);

      $.post("updateItem.php", {
        type: "updateItem",
        recid: recid,
        selectionType: checkedState,
      })
        .done(function (data) {
          data = JSON.parse(data);
          if (data.error) {
            var ajaxError = data.text;
            var errorAlert =
              "There was an error updating the Completed Checklist Item - " +
              ajaxError +
              ". Please contact the Developer";
            $this.closest("td").addClass("table-danger");

            // Restore checkbox ke kondisi sebelumnya
            $this.prop("checked", !checkedState);

            // Tampilkan pesan error
            $("#updateSelectionsErrorMessage").html(errorAlert);
            $("#updateSelectionsError").show();
          } else {
            $this.closest("td").addClass("table-success");
            $this.closest("td").removeClass("table-danger");
          }
        })
        .fail(function (xhr) {
          var httpStatus = xhr.status;
          var ajaxError =
            "There was an error updating the Completed Checklist Item - AJAX request error. HTTP Status: " +
            httpStatus +
            ". Please contact the Developer";
          $this.closest("td").addClass("table-danger");

          // Tampilkan pesan error
          $("#updateSelectionsErrorMessage").html(ajaxError);
          $("#updateSelectionsError").show();

          // Restore checkbox ke kondisi sebelumnya
          $this.prop("checked", !checkedState);
        });
    });
  });
</script>