Функция ограничения флажка не работает должным образом

Question

Я попытался включить функцию в свой вопрос о флажках, где можно отметить только 3 флажка.Тем не менее, он по-прежнему будет продолжать проверку за пределами (3).

Я уверен, что это как-то связано с latestcheck.checked = false;

Мой машинописьфункция:

factors(whichlist, maxchecked, latestcheck) {
// An array containing the id of each checkbox to monitor. 
var listone = new Array("teamStrength", "marketOp", "productOff", "technology", "financialPerform", "coinvestors", "mediaExpo", "awardsWon", "portfolioFit");

// End of customization.
var iterationlist;
eval("iterationlist=" + whichlist);
var count = 0;
for (var i = 0; i < iterationlist.length; i++) {
  if ((<HTMLInputElement>document.getElementById(iterationlist[i])).checked == true) { 
    count++;

  }
  if (count > maxchecked) { 
    latestcheck.checked = false; 
    console.log("last checked: " + latestcheck.checked); 
  }
}
if (count > maxchecked) {
  alert('Sorry, only ' + maxchecked + ' may be checked.');
}

}

Что должно произойти, это то, что после того, как предупреждение выскакивает, флажок, который я установил (после ограничения 3, так что четвертый флажок) будетбесконтрольно.

Answer 1

Ты не можешь сделать это?(Я не пишу TypeScript)

const listOne = ["teamStrength", "marketOp", "productOff", "technology", "financialPerform", "coinvestors", "mediaExpo", "awardsWon", "portfolioFit"];    
const container = document.getElementById("checkboxContainer");
container.addEventListener("click",function(e) {
  if (listOne.indexOf(e.target.id) !=-1) { // may not even be needed
    if (container.querySelectorAll("input[type=checkbox]:checked").length > 3) {
      e.preventDefault(); // or this.checked=false;
    }
  }
});

Упрощенно:

document.querySelectorAll(".question").forEach(function(q) {
  q.addEventListener("click", function(e) {
    var len = this.querySelectorAll("input[type=checkbox]:checked").length;
    if (len > 3) {
      e.preventDefault();
    }
  });
});

<div class="question">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>
<div class="question">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>