Disable checkbox after reaching a limit

Question

I'm looking for a native JavaScript Solution that will prevent the user checking more than 2 items by disabling the remaining checkboxes (and enabling them again if the user unchecks one of their options)

Below are the checkboxes I have in place:

<div class="checkboxdiv">
    <input type="hidden" name="Extras" value="">
    <input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
    <input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
    <input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
    <input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
    <input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>

I am aware this has been covered using JQuery, but I'm looking for a native solution so I can better understand how the code works.

Solution

This is the final solution I have come up with, through everyone's help.

function checkboxlimit(checkgroup, limit){
    var checkgroup=checkgroup;
    var limit=limit;
    //Changes onclick funtion for each checkbox
    for (var i=0; i<checkgroup.length; i++){
        checkgroup[i].onclick=  function(){

            var checkedcount=0;
            //Loops through checkboxes
            for (var i=0; i<checkgroup.length; i++){
            //adds 1 if checked, 0 if not
            checkedcount+=(checkgroup[i].checked)? 1 : 0;
            }

            //Loops through checkboxes
            for (var i=0; i<checkgroup.length; i++){

                //Disables check box if it's unchecked and the limit has been reached
                if(!checkgroup[i].checked && checkedcount==limit){
                    checkgroup[i].disabled=true;
                }

                //Enables all checkboxes otherwise
                else{
                    checkgroup[i].disabled=false;
                }
            }
        }
    }
}

Check this question for a starter: http://stackoverflow.com/questions/32438068/perform-an-action-on-checkbox-cheched-or-unchecked-event-on-html-form Your `onchange` handler would simply check all checkboxes' states and disable all unchecked checkboxes, when two checkboxes are `checked`. — qqilihq, Dec 22 '16 at 12:12
afaik, there is neither readonly nor disabled attribute for checkboxes. So, technically you need to implement such behaviour manually, like here http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly — novus42, Dec 22 '16 at 12:26

score 3 · Answer 1 · answered Dec 22 '16 at 12:22

Check out the CSS pseudo class ":checked" and document.querySelectorAll.

Here is a fiddle to start from:

var currentlyCheckedCount = 0

function disableRemainingCheckboxes() {
  Array.from(document.querySelectorAll('input[type="checkbox"]:not(:checked)')).forEach(function(element) {
    element.disabled = 'disabled'
  })
}

function enableAllCheckboxes() {
  Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(element) {
    element.disabled = undefined
  })

}

Array.from(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
  checkbox.addEventListener('change', onCheckboxClick)
})

function onCheckboxClick() {
  if(this.checked) {
    currentlyCheckedCount++
  } else {
    currentlyCheckedCount--
  }

  if(currentlyCheckedCount == 2) {
    disableRemainingCheckboxes()
  } else {
    enableAllCheckboxes()
  }
}

sinisake · Accepted Answer · 2016-12-22T13:30:20.420

Geekonaut answer/code is great, but, if you care about IE support (Array.from() doesn't work in it), here is simplified, more straight-forward version:

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes

      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
    <input type="hidden" name="Extras" value="">
    <input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
    <input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
    <input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
    <input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
    <input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>

Code is very clear (easy to understand), i hope, and there are comments, too.

This works, and fitted into the solution I was working with, thanks. It's easy to "fool" the counting through fast clicking, but I should easily be able to resolve that and will post the solution as soon as I do. — Grimat, Dec 22 '16 at 14:39

Disable checkbox after reaching a limit

2 Answers2