I need help with a checkbox project

MDN Learn
#1

Can someone help me find a simple way of creating checkboxes that have limited options a user can select with html and javascript?

For example, out of 5 check boxes the users can only select 3 of them.

I would be super greatful.

#2

Hi @ayanda! You can make checkboxes uncheckable using the disabled HTML attribute — no JS required! Does that solve your problem, or do you need something more?

#3

@chrisdavidmills I think @ayanda meant to allow users to check maximum 3 checkboxes out of 5

#4

Yes thats what i meant. Checking a maximum of 3 out 5 etc…

#5

Hi,
I think you can find the answer here:

#6

The problem with stackoverflow solutions for me is that they use jquery and other concepts i havent come across yet so i jist end up not understanding.

#7

All the variations of my solution have fallen flat.

#8

Here is a modified version of your solution that is working:

let counter = 0;

const checkboxes = document.getElementsByName('check')

for (i = 0; i < checkboxes.length; i++) {
  const checkbox = checkboxes[i]
  checkbox.addEventListener('click', (e) => {
    if (checkbox.checked && counter >= 3) {
      e.preventDefault()
      e.stopPropagation()
      return
    }
    if (checkbox.checked) {
      counter++  
    } else {
      counter--
    }
  })
}
#9

Yes it does, thank you!! Let me study it some more! :slight_smile:

1 Like