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>

5 thoughts on “Disable checkbox through Status javascript”

  1. Try this, if i’m not wrong understanding your code

     if (checked === 0) {
        // unpaid condition
        document.getElementById("selectall").checked = false;
      } else if (checked === checkboxes.length) {
        // paid condition
        document.getElementById("selectall").checked = true;
        document.getElementById("selectall").disabled= true;
      }
    

    Update: I don’t answer via code but the clue is, You should add name="product_paid[]" attribute inside PAID and UNPAID tr tag
    everytime the UI updates, you should call a function to check if this checkbox should be disabled or not

    Update 2 let me try the code snippets I think this is what you intended

    const toggle = (source) => {
      const checkboxes = document.getElementsByName('product_id[]');
      checkboxes.forEach((cb, idx) => {
        
        const paidElement = document.getElementsByName("product_paid[]")[idx];
        const paidText = paidElement.innerText
        if(paidText !== 'Paid'){
         cb.checked = source.checked;
        }
      });
      compute();
    }
    
    const compute = () => {
      const checkboxes = document.getElementsByName('product_id[]');
      let total = 0;
      let checked = 0;
      checkboxes.forEach((cb, idx) => {
        if (cb.checked) {
          checked++;
          const amountElt = cb.parentElement.parentElement.getElementsByClassName("amount")[0];
          total += parseInt(amountElt.innerText, 10);
        }
    
        const paidElement = document.getElementsByName("product_paid[]")[idx];
        const paidText = paidElement.innerText
        if(paidText === 'Paid'){
         cb.disabled = true
        }
      });
      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);
    });
    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 name="product_paid[]">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 name="product_paid[]">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 name="product_paid[]">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 name="product_paid[]">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 name="product_paid[]">Unpaid</td>
            <td class="amount">8000</td>
            <td>someval</td>
          </tr>
        </tbody>
      </table>
    Reply

Leave a Comment