Javascript limit selected checkboxes to 2

问题

I would like to disable selecting more than 2 choice checkboxes, but I couldn't do it with my javascript code. How can I do this?

btn.addEventListener("click",function () {
var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','questions.json');//json dosyasından sorular ve sıklar okunuyor
    ourRequest.onload = function () {
        pos = 0;
        counters = [A=0,B=0,C=0,D=0];
        ourData = JSON.parse(ourRequest.responseText);
        renderQuestion(ourData);
        btn.innerHTML = "BAŞA DÖN";
    }
    ourRequest.send();
})


var renkler = ["Yeşil","Sarı","Mavi","Kırmızı"];

function _(x){
return document.getElementById(x);//html dom
}
function renderQuestion(data){ //soru soran fonksiyon
test = _("test"); //dom ile test div ini seç
if(pos >= 4){//eğer pozisyon soru sayısından büyükse veya soru sayısına eşitse

    document.getElementById('btntest').style.visibility = "hidden";

    for(var i = 0;i<choices.length;i++){test.innerHTML += "<h2>Sonuç : "+renkler[i]+" renkli kişilikten "+ counters[i] +" puanlık işaretlediniz.</h2>";}// test divine sonucu yazdır
        _("test_status").innerHTML = "Testi tamamladınız."; // "test_status" başlığına test bitti yazdır
        btn.innerHTML = "TEKRAR";
        A=0;B=0;C=0;D=0;
        pos = 0; // pos tekrar 0 yap
        return false; //false döndür
}

//_("test_status").innerHTML = "Question "+(pos+1)+"of"+data.length; // "test_status başlığına hangi soruda olduğunu yazdır
question = data[pos].soru; // questions listesinden 0. yani soru kısmını question değişkenine ata
chA = data[pos].siklar1; // 1.cevap
chB = data[pos].siklar2; // 2.cevap
chC = data[pos].siklar3;
chD = data[pos].siklar4;// 3.cevap
test.innerHTML = "<h3>"+question+"</h3>"; //soruyu yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox'  id='ch1' name='choices' value='A'>"+chA+"<br>"; //1.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch2' name='choices' value='B'> "+chB+"<br>"; //2.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch3' name='choices' value='C'> "+chC+"<br>"; //3.cevabı yazdır
test.innerHTML += "<input class='single-checkbox' type='checkbox' id='ch4' name='choices' value='D'> "+chD+"<br><br>"; //4.cevabı yazdır

test.innerHTML += "<button id='btntest' class='button' onclick='checkAnswer()'> DEVAM ET >> </button>"    //cevabı kontrol et fonksiyonunu cağır
}

function checkAnswer(){
choices = document.getElementsByName("choices"); // seçenekler domunu seç
if(choices[0].checked){
    if(choices[1].checked || choices[2].checked || choices[3].checked)   {
        counters[0]+=1;
        findChecked(choices);
        choices[0].checked = "false";
    }
    else{
        counters[0]+=2;
    }
}
else if(choices[1].checked){
    if(choices[0].checked || choices[2].checked || choices[3].checked){
        counters[1]+=1;
        findChecked(choices);
    }
    else{
        counters[1]+=2;

    }
}
else if(choices[2].checked){
    if(choices[0].checked || choices[1].checked || choices[3].checked){
        counters[2]+=1;
        findChecked(choices);
    }
    else{
        counters[2]+=2;

    }
}
else if(choices[3].checked){
    if(choices[0].checked || choices[1].checked || choices[2].checked){
        counters[3]+=1;
        counters[3]++;
    }
    else{
        counters[3]+=2;

    }

}
pos++; // pozisyonu 1 arttır
renderQuestion(ourData); //render questionsu tekrar çağır
}

回答1:

You could probably use this logic to prevent more than one checkbox being selected:

1. Check the total number of checked select boxes.
2. If the total number exceeds the max number, disable the check.

Code:

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

And the JavaScript for the same.

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

Snippet

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

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

来源：https://stackoverflow.com/questions/43456868/javascript-limit-selected-checkboxes-to-2