Javascript limit selected checkboxes to 2

Question

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
}

Answer 1

The following code will only allow two checkboxes to be selected.

• setCustomValidity() changes the error message that is shown when validation fails while simultaneously marking the input as invalid (if an error message is passed in to setCustomValidity, which we are doing).

• reportValidity() makes the error message show immediately. Without it we would have to wait for the form to be submitted before the error is shown.

• We immediately set the checkbox back to being unchecked if it was checked this.checked = false. The checkbox has already been checked in the DOM by the time the on change event handler runs, so this is how we have to do things. The alternative would be to code this part up the way Praveen did in his answer with an on click handler.

/* Makes the checkbox only allow 2 items to be selected */
document.querySelectorAll('.checkboxes-container input[type=checkbox]').forEach(el=>{
  el.addEventListener('change', function(){
    if ( el.closest('.checkboxes-container').querySelectorAll('input:checked').length > 2 ){
      this.setCustomValidity('There is a max of two items that can be selected')
      this.checked = false
      this.reportValidity()
    }
  })
});

<div class='checkboxes-container'>
  <label><input class='single-checkbox' type='checkbox' value='A'>chA</label><br>
  <label><input class='single-checkbox' type='checkbox' value='B'>chB</label><br>
  <label><input class='single-checkbox' type='checkbox' value='C'>chC</label><br>
  <label><input class='single-checkbox' type='checkbox' value='D'>chD</label><br>
</div>

Answer 2

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>