Disable checkbox through Status javascript

I’m having a trouble on how can I disabled checkbox based on their status. On my current data when the field status is equal to Paid the checkbox should disable.It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance,This is what It looks like below.

enter image description here

const toggle = (source) => {
  const checkboxes = document.getElementsByName('product_id[]');
  checkboxes.forEach(cb => {
    cb.checked = source.checked;
  });
  compute();
}

const compute = () => {
  const checkboxes = document.getElementsByName('product_id[]');
  let total = 0;
  let checked = 0;
  checkboxes.forEach(cb => {
    if (cb.checked) {
      checked++;
      const amountElt = cb.parentElement.parentElement.getElementsByClassName("amount")[0];
      total += parseInt(amountElt.innerText, 10);
    }
  });
  document.getElementById("total_checked").innerText = checked;
  document.getElementById("total_amount").innerText = total;


  if (checked === 0) {
    document.getElementById("selectall").checked = false;
  } else if (checked === checkboxes.length) {
    document.getElementById("selectall").checked = true;
  }
}

document.getElementsByName('product_id[]').forEach(cb => {
  cb.addEventListener('change', compute);
});
  Checked <p id="total_checked"></p>
  Amount <p id="total_amount"></p>
  <table class="table" name="table" id="table">
    <thead>
      <tr>
        <th></th>
        <th><input id="selectall" type="checkbox" onClick="toggle(this)" /></th>
        <th>Sample</th>
        <th>Status</th>
        <th>Amount</th>
        <th>trtrtr</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td><input type="checkbox" name="product_id[]"></td>
        <td>Value1</td>
        <td>Paid</td>
        <td class="amount">5200</td>
        <td>someval</td>
      </tr>

      <tr>
        <td></td>
        <td><input type="checkbox" name="product_id[]"></td>
        <td>Value2</td>
        <td>Unpaid</td>
        <td class="amount">8000</td>
        <td>someval</td>
      </tr>

       <tr>
        <td></td>
        <td><input type="checkbox" name="product_id[]"></td>
        <td>Value2</td>
        <td>Unpaid</td>
        <td class="amount">8000</td>
        <td>someval</td>
       <tr>
        <td></td>
        <td><input type="checkbox" name="product_id[]"></td>
        <td>Value2</td>
        <td>Paid</td>
        <td class="amount">8000</td>
        <td>someval</td>
      </tr>
       <tr>
        <td></td>
        <td><input type="checkbox" name="product_id[]"></td>
        <td>Value2</td>
        <td>Unpaid</td>
        <td class="amount">8000</td>
        <td>someval</td>
      </tr>
    </tbody>
  </table>

20 thoughts on “Disable checkbox through Status javascript”

Leave a Comment