javascript - 通过状态 javascript 禁用复选框

Question

我无法根据其状态禁用复选框。当字段状态等于Paid复选框时，我的当前数据应该被禁用。如果有人能弄清楚我哪里出错了，那就太好了。非常感谢你，这就是它的样子。

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>

标签： javascripthtml

Answer 1

试试这个，如果我理解你的代码没有错

 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;
  }

更新：我没有通过代码回答，但线索是，您应该在每次 UI 更新时在 PAID 和 UNPAID tr 标签中添加 name="product_paid[]" 属性，您应该调用一个函数来检查是否应该禁用此复选框或不是

更新 2 让我尝试一下我认为这是您想要的代码片段

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>