[Demo] CheckBox Click When Disabled

[Demo] CheckBox Click When Disabled

by dying_sakura

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
      <th>#</th>
      <th>LB#</th>
      <th>Weight#</th>
      <th>Wingband #</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row_0">
      <td>
        <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
      </td>
      <td class="labelcell">
        <input value="" class="hehe form-control" placeholder="" required id="auto" />
      </td>
      <td class="labelcell">
        <input name="weight" class="hehe form-control" type="number" />
      </td>
      <td class="labelcell">
        <input name="wingBand" class="hehe form-control" type="number" />
      </td>
      <td class="labelcell">
        <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan=5><button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

JavaScript

//this is my function for autonumbering
const inputAncestor = document.querySelector("tbody");

inputAncestor.addEventListener("keyup", e => {
  if (
    e.target.matches('input.form-control') &&
    ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10))
  ) {
    const inputs = document.querySelectorAll(".form-control");
    let value = parseInt(e.target.value);
    inputs.forEach((inp) => {
      if (inp !== e.target) {
        inp.value = ++value;
      }
    })
  }
})

//this is my function for adding dynamic rows.

$("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length + 1;
  let rowIndexx = $('.auto_num').length + 1;

  var newRow = '<tr><td><input class="auto_num"  type="text" value="' + rowIndexx + '" /></td>"' +
    '<td><input name="lightBand' + rowIndex + '" value="" class="form-control"  type="number"  /></td>"' +
    '<td><input id="weight' + rowIndex + '" name="weight' + rowIndex + '" type="number" /></td>"' +
    '<td><input id="wingBand' + rowIndex + '" name="wingBand' + rowIndex + '" type="number" /></td>"' +
    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);
});

$(document).on('click', '.removerow', function() {
  $(this).parents('tr').remove();
  regenerate_auto_num();
});

function regenerate_auto_num() {
  let count = 1;
  $(".auto_num").each(function(i, v) {
    $(this).val(count);
    count++;
  })
}