Disabling checkbox selection after so many checkboxes selected

JavaScript
,
1

How do I go about disabling checkbox selection after so many, in this example 3 is selected
I have tried to coding like this, but it doesn’t do anything

        <script type="text/javascript">
            function check(){
            //var numberOfChecked = $('input[type="checkbox"]:checked').length;
            var numberOfChecked = $('input:checkbox:checked').length;
            if (numberOfChecked > 3){
                $(".cbox").toggle(this.checked);
            }
        }

with the html being like this

<div id="checkbox_group">
            <label>Sports</label><input type="checkbox" class="cbox" name="Sports" value="Sports" onclick="check();" >
            <label>News</label><input type="checkbox" class="cbox" name="News" value="News" onclick="check();" >
            <label>Entertainment</label><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" onclick="check();" >
            <label>Music</label><input type="checkbox" class="cbox" name="Music" value="Music" onclick="check();" >
            
        </div>
2

It may not be the right answer but I would do it like this:)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>

<body>
<div id="checkbox_group">
            <label for="Sports">Sports</label><input type="checkbox" class="cbox" name="Sports" id="Sports" value="Sports" >
            <label for="News">News</label><input type="checkbox" class="cbox" name="News" id="News" value="News" >
            <label for="Entertainment">Entertainment</label><input type="checkbox" class="cbox" name="Entertainment" id="Entertainment" value="Entertainment" >
            <label for="Music">Music</label><input type="checkbox" class="cbox" name="Music" id="Music" value="Music" >
</div>


<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    $(".cbox").on("click", function() {
        var numberOfChecked = $('input.cbox:checkbox:checked').length;
        if (numberOfChecked > 3) {
            $(this).prop('checked', false);
        }
    });

});
</script>

</body>
</html>

Note I removed the onclick attributes from the html and added ‘for’ attributes to the labels so that the checkboxes can be checked easier.

It would probably be best if you told the user they can only select 3 otherwise they might get confused when the last one won’t work. Or alternatively you could disable all other checkboxes when three are selected but would require a little more logic than above.

1 Like
3

Not working

4

You realise that sounds quite rude after the effort I put into answering your problem?

You will need to explain what the problem is exactly as it seems to be more or less doing what I expected?

I assumed you only wanted 3 checkboxes to be selected but if there were more checkboxes then they could not be selected unless a previous one was de-selecetd. This is what the code above should be doing as shown in the codepen above.

I did mention that it may be better to disable other checkboxes once 3 had been selected but that would require more logic.

At present you can only ever select 3 checkboxes which I thought was what you wanted? If this is not the case then please clarify what is not working and what you wanted to happen and if your answer is more than 2 words long I may be inclined to answer. :slight_smile:

1 Like
5

It works fine for me in Chrome latest.
What is the exact problem you are having?
Which browser are you using?
etc …

1 Like
6

I do apologise, it does work now that I have put it in the <head> tag

8

I sound rude over the internet? scratches head how?

9

Glad you agree. Apology accepted:)

2 Likes
10

Where did I agree? I wouldn’t agree that I was being “rude” over the internet, how could I? Oh I see, you forgot to put the question mark…looks like we have a troll “adviser”

11

I can imagine it took Paul a while to put that solution together for you, and to respond with “Not Working” does come across as brusque.

All we’re saying is that politeness costs noting.

1 Like
12

OK, if you thought it was rude, why did you bother replying? Is there something mentally wrong with people like you to think that people are rude just typing terse statements on the internet? Or do people like you want a whole book worth of explanations of the reason why it doesn’t work when the person doesn’t know why it’s not working?

13

Why are we arguing here? Paul did a terrific job (as usual, I wish I knew just a 10% of what he knows) and now it works… the thing is… Is it the answer that you were looking for?

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.