Angular 数据表：如何根据列数据禁用立即行复选框

Question

How to disable row checkbox based on the column data. Have one datatable and have to write one condition, if firstname="Superman", need to disable checkbox of the row. So not possible to select the checkbox again. I tried with below code and I'm unbale to disable the checkbox. I tried below code,

this.http.get(dataUrl).subscribe(response => {
  // setTimeout(() => {
  this.persons = response.data;
  $.each(this.persons, function(key, value) {
    if (value.firstname == "Superman") {
      console.log("inside");
      // $('.checkboxCls').prop('disabled', true);
      $(this)
        .closest("tr")
        .find("input[type=checkbox]")
        .prop("disabled", true);
    }
  });
  this.dtTrigger.next();
  // });
});

Here is the working Stackblitz for reference. Could you please suggest what is the issue.

Answer 1

You can disable the checkbox from the HTML template side.

    <td><input [disabled]="person.firstName === 'Superman'" type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="{{person.id}}"></td>

Edited StackBlitz Code