Limite Javascript sélectionné cases à cocher 2

Question

Je voudrais désactiver la sélection de plus de 2 cases à cocher, mais je ne pouvais pas le faire avec mon code javascript. Comment puis-je faire ceci?

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 
} 

Answer 1

Vous pouvez probablement utiliser cette logique pour empêcher plus d'une case à cocher étant sélectionnée:

1. Vérifiez le nombre total de boîtes de sélection vérifiés.
2. Si le nombre total dépasse le nombre maximal, désactivez la vérification.

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> 

Et le JavaScript pour la même.

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>