Javascript 将选定的复选框限制为 2 个

Question

我想禁用选择 2 个以上的选择复选框，但我无法使用我的 javascript 代码来做到这一点。我怎样才能做到这一点？

\n\n

btn.addEventListener("click",function () {\nvar ourRequest = new XMLHttpRequest();\n    ourRequest.open(\'GET\',\'questions.json\');//json dosyas\xc4\xb1ndan sorular ve s\xc4\xb1klar okunuyor\n    ourRequest.onload = function () {\n        pos = 0;\n        counters = [A=0,B=0,C=0,D=0];\n        ourData = JSON.parse(ourRequest.responseText);\n        renderQuestion(ourData);\n        btn.innerHTML = "BA\xc5\x9eA D\xc3\x96N";\n    }\n    ourRequest.send();\n})\n\n\nvar renkler = ["Ye\xc5\x9fil","Sar\xc4\xb1","Mavi","K\xc4\xb1rm\xc4\xb1z\xc4\xb1"];\n\nfunction _(x){\nreturn document.getElementById(x);//html dom\n}\nfunction renderQuestion(data){ //soru soran fonksiyon\ntest = _("test"); //dom ile test div ini se\xc3\xa7\nif(pos >= 4){//e\xc4\x9fer pozisyon soru say\xc4\xb1s\xc4\xb1ndan b\xc3\xbcy\xc3\xbckse veya soru say\xc4\xb1s\xc4\xb1na e\xc5\x9fitse\n\n    document.getElementById(\'btntest\').style.visibility = "hidden";\n\n    for(var i = 0;i<choices.length;i++){test.innerHTML += "<h2>Sonu\xc3\xa7 : "+renkler[i]+" renkli ki\xc5\x9filikten "+ counters[i] +" puanl\xc4\xb1k i\xc5\x9faretlediniz.</h2>";}// test divine sonucu yazd\xc4\xb1r\n        _("test_status").innerHTML = "Testi tamamlad\xc4\xb1n\xc4\xb1z."; // "test_status" ba\xc5\x9fl\xc4\xb1\xc4\x9f\xc4\xb1na test bitti yazd\xc4\xb1r\n        btn.innerHTML = "TEKRAR";\n        A=0;B=0;C=0;D=0;\n        pos = 0; // pos tekrar 0 yap\n        return false; //false d\xc3\xb6nd\xc3\xbcr\n}\n\n//_("test_status").innerHTML = "Question "+(pos+1)+"of"+data.length; // "test_status ba\xc5\x9fl\xc4\xb1\xc4\x9f\xc4\xb1na hangi soruda oldu\xc4\x9funu yazd\xc4\xb1r\nquestion = data[pos].soru; // questions listesinden 0. yani soru k\xc4\xb1sm\xc4\xb1n\xc4\xb1 question de\xc4\x9fi\xc5\x9fkenine ata\nchA = data[pos].siklar1; // 1.cevap\nchB = data[pos].siklar2; // 2.cevap\nchC = data[pos].siklar3;\nchD = data[pos].siklar4;// 3.cevap\ntest.innerHTML = "<h3>"+question+"</h3>"; //soruyu yazd\xc4\xb1r\ntest.innerHTML += "<input class=\'single-checkbox\' type=\'checkbox\'  id=\'ch1\' name=\'choices\' value=\'A\'>"+chA+"<br>"; //1.cevab\xc4\xb1 yazd\xc4\xb1r\ntest.innerHTML += "<input class=\'single-checkbox\' type=\'checkbox\' id=\'ch2\' name=\'choices\' value=\'B\'> "+chB+"<br>"; //2.cevab\xc4\xb1 yazd\xc4\xb1r\ntest.innerHTML += "<input class=\'single-checkbox\' type=\'checkbox\' id=\'ch3\' name=\'choices\' value=\'C\'> "+chC+"<br>"; //3.cevab\xc4\xb1 yazd\xc4\xb1r\ntest.innerHTML += "<input class=\'single-checkbox\' type=\'checkbox\' id=\'ch4\' name=\'choices\' value=\'D\'> "+chD+"<br><br>"; //4.cevab\xc4\xb1 yazd\xc4\xb1r\n\ntest.innerHTML += "<button id=\'btntest\' class=\'button\' onclick=\'checkAnswer()\'> DEVAM ET >> </button>"    //cevab\xc4\xb1 kontrol et fonksiyonunu ca\xc4\x9f\xc4\xb1r\n}\n\nfunction checkAnswer(){\nchoices = document.getElementsByName("choices"); // se\xc3\xa7enekler domunu se\xc3\xa7\nif(choices[0].checked){\n    if(choices[1].checked || choices[2].checked || choices[3].checked)   {\n        counters[0]+=1;\n        findChecked(choices);\n        choices[0].checked = "false";\n    }\n    else{\n        counters[0]+=2;\n    }\n}\nelse if(choices[1].checked){\n    if(choices[0].checked || choices[2].checked || choices[3].checked){\n        counters[1]+=1;\n        findChecked(choices);\n    }\n    else{\n        counters[1]+=2;\n\n    }\n}\nelse if(choices[2].checked){\n    if(choices[0].checked || choices[1].checked || choices[3].checked){\n        counters[2]+=1;\n        findChecked(choices);\n    }\n    else{\n        counters[2]+=2;\n\n    }\n}\nelse if(choices[3].checked){\n    if(choices[0].checked || choices[1].checked || choices[2].checked){\n        counters[3]+=1;\n        counters[3]++;\n    }\n    else{\n        counters[3]+=2;\n\n    }\n\n}\npos++; // pozisyonu 1 artt\xc4\xb1r\nrenderQuestion(ourData); //render questionsu tekrar \xc3\xa7a\xc4\x9f\xc4\xb1r\n}\n

\n

Answer 1

您可能可以使用这一逻辑来防止选择多个复选框：

1. 检查选中的选择框的总数。
2. 如果总数超过最大数量，则禁用检查。

代码：

<label><input type="checkbox" class="check" /> Checkbox 1</label>
<label><input type="checkbox" class="check" /> Checkbox 2</label>
<label><input type="checkbox" class="check" /> Checkbox 3</label>
<label><input type="checkbox" class="check" /> Checkbox 4</label>
<label><input type="checkbox" class="check" /> Checkbox 5</label>

和 JavaScript 一样。

<label><input type="checkbox" class="check" /> Checkbox 1</label>
<label><input type="checkbox" class="check" /> Checkbox 2</label>
<label><input type="checkbox" class="check" /> Checkbox 3</label>
<label><input type="checkbox" class="check" /> Checkbox 4</label>
<label><input type="checkbox" class="check" /> Checkbox 5</label>

片段

var checks = document.querySelectorAll(".check");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;
function selectiveCheck (event) {
  var checkedChecks = document.querySelectorAll(".check:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

var checks = document.querySelectorAll(".check");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;
function selectiveCheck (event) {
  var checkedChecks = document.querySelectorAll(".check:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}