單擊復選框后未啟用按鈕-有解無憂

所以，我創建了一個帶有復選框的表格，我希望用戶至少選中兩個選項，以便啟用按鈕提交答案。

HTML

<body>
  <h1>Checked two options</h1>
  <br />
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" onclick="EnableButton()" />
</body>

我有這個功能，但它不起作用。我正在使用回圈來計算用戶檢查了多少選項，但它不起作用。

function EnableButton() {
  var tblFoods = document.getElementById("tblFoods");
  var checkeds = tblFoods.getElementsByTagName("INPUT");

  var counter = 0;

  for (let i = 0; i < marcados.length; i  ) {
    if (checkeds[i].checked) {
      counter  ;
    }
  }

  if (counter >= 2) {
    document.getElementById("mybtn").disabled = false;
  } else {
    document.getElementById("mybtn").disabled = true;
  }
}

我究竟做錯了什么？

uj5u.com熱心網友回復：

Enable當您選中復選框時，您需要呼叫您的函式。這是一個作業示例：https : //codesandbox.io/s/proud-architecture-ou5l2?file=/src/index.js

使用您現有的代碼：

var tblFoods = document.getElementById("tblFoods");
var checkeds = tblFoods.querySelectorAll("input");
const btn = document.getElementById("mybtn");

function enableButton() {
  var counter = 0;

  for (let i = 0; i < checkeds.length; i  ) {
    if (checkeds[i].checked) {
      counter  ;
    }
  }

  if (counter >= 2) {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }
}

const handleClick = () => {
  enableButton();
  // do whatever else you need in here
};

checkeds.forEach((box) => box.addEventListener("click", handleClick));

uj5u.com熱心網友回復：

您需要檢查是否需要在檢查輸入時啟用按鈕，而不是在單擊按鈕時啟用。

最好，最簡潔的方法是：

const table = document.querySelector('#tblFoods');
table.addEventListener('change', () => {
  const checkedCount = [...table.querySelectorAll('input')].reduce((a, input) => a   input.checked, 0);
  document.getElementById("mybtn").disabled = checkedCount < 2;
});

<h1>Checked two options</h1>
<br/>
<p>What are some of your favorite dishes?</p>
<table id="tblFoods">
  <tr>
    <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
  </tr>
  <tr>
    <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
  </tr>
  <tr>
    <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
  </tr>
  <tr>
    <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
  </tr>
</table>
<br />
<input type="submit" id="mybtn" disabled value="Submit" />

你的原始代碼，經過調整，也可以作業，但相比之下相當冗長。

document.querySelector('#tblFoods').addEventListener('change', () => {
   var tblFoods = document.getElementById("tblFoods");
   var checkeds = tblFoods.getElementsByTagName("INPUT");

   var counter = 0;

   for(let i =0; i < checkeds.length;i  )
   {
       if(checkeds[i].checked)
       {
        counter  ;
       }
   }

   if(counter>=2)
   {
       document.getElementById("mybtn").disabled = false;
   }
   else
   {
       document.getElementById("mybtn").disabled = true;
   }
});

<h1>Checked two options</h1>
<br/>
<p>What are some of your favorite dishes?</p>
<table id="tblFoods">
  <tr>
    <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
  </tr>
  <tr>
    <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
  </tr>
  <tr>
    <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
  </tr>
  <tr>
    <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
  </tr>
</table>
<br />
<input type="submit" id="mybtn" disabled value="Submit" />

uj5u.com熱心網友回復：

您必須分別處理每個復選框元素的更改，最后是提交按鈕。您可以執行以下操作。

注意：分別查看如何onClick在每個input type checkbox元素和submit按鈕上使用事件處理程式。此外，我們必須在提交時重置所有內容。

一個可能的解決方案：

let checks_counter = 0;

function EnableButton(checkbox) {
  if (checkbox.checked) {
    checks_counter  ;
  }

  if (checks_counter > 2) {
    document.getElementById("mybtn").disabled = false;
  } else {
    document.getElementById("mybtn").disabled = true;
  }
}

function submitHandler() {
  var elements = document.getElementsByTagName('input');
  
  //unchecking everything
  for (var i = elements.length; i--;) {
    if (elements[i].type == 'checkbox') {
      elements[i].checked = false;
    }
  }

  //resetting the counter and disabling the button
  checks_counter = 0;
  document.getElementById("mybtn").disabled = true;
}

<body>
  <h1>Checked two options</h1>
  <br/>
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" onChange="EnableButton(this)" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" onChange="EnableButton(this)" /><label for="chkLasagna">Lasagna</label></td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" onChange="EnableButton(this)" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" onChange="EnableButton(this)" /><label for="chkBarbecue">Barbecue</label></td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" onclick="submitHandler()" />

</body>

uj5u.com熱心網友回復：

您必須在用戶選擇食物時運行您的功能，而不是在用戶單擊按鈕時運行。一個簡單的解決方案是從按鈕中洗掉 onclick 事件并在每個輸入中添加 onchange 事件：

<h1>Checked two options</h1>
  <br />
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" onchange="EnableButton()" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" onchange="EnableButton()" /><label for="chkLasagna">Lasagna</label>
      </td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" onchange="EnableButton()" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" onchange="EnableButton()" /><label for="chkBarbecue">Barbecue</label>
      </td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" />

uj5u.com熱心網友回復：

你可以使用類似的東西：

document.querySelectorAll("input[type='checkbox']").forEach(e => e.addEventListener("click", () => {
  const submitButton = document.querySelector("#mybtn");
  if (!submitButton) return;
  
  const checkedInputs = document.querySelectorAll("#tblFoods input[type='checkbox']:checked").length;
  submitButton.disabled = checkedInputs < 2;
}));

換句話說，每次單擊復選框時，都會檢查總共選中了多少個復選框。如果此數量大于或等于 2，則啟用該按鈕，否則禁用該按鈕。

uj5u.com熱心網友回復：

也許我錯了，但是因為你已經初始化了 counter = 0，每次呼叫該函式時，它都會自動設定為 0，所以你應該全域宣告它以成為一個有效的計數器。

var counter = 0;
    function EnableButton()
    {
       var tblFoods = document.getElementById("tblFoods");
        var checkeds = tblFoods.getElementsByTagName("INPUT");

   for(let i =0; i < checkeds.length;i  )
   {
       if(checkeds[i].checked)
       {
        counter  ;
       }
    }

  if(counter>=2)
 {
     document.getElementById("mybtn").disabled = false;
 }
 else
 {
     document.getElementById("mybtn").disabled = true;
 }

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351430.html

標籤：javascript html css

上一篇：在頁面上作業時出現線性梯度錯誤

下一篇：無法在React中使用背景屬性獲取影像