click up to 5 checkboxes

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
buzzby247
Forum Newbie
Posts: 23
Joined: Wed Jan 14, 2009 6:19 am

click up to 5 checkboxes

Post by buzzby247 »

hi there ppl.

i have a competition running whereby i want the user to click up to 5 answers. the user has a choice of 12 answers (12 checkboxes). i am stuck as to how to code the script so the maximum number of checkboxes that can be ticked is 5. any helpers please?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: click up to 5 checkboxes

Post by kaszu »

Count how many checkboxes user has checked. When count reaches the limit, disable unchecked checkboxes.
If you are using jQuery (haven't tested following code):

Code: Select all

var inp = $('input[type="checkbox"]');
inp.click(oncheck).change(oncheck);
 
function oncheck () {
    var cnt = inp.filter(':checked').count;
    if(cnt >= 5) {
        inp.not(':checked').attr('disabled', true);
    } else {
        inp.attr('disabled', false);
    }
}
Last edited by kaszu on Thu Mar 05, 2009 1:03 pm, edited 1 time in total.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: click up to 5 checkboxes

Post by VladSun »

Using a simple JS is still simple:

Code: Select all

<div id='checkBoxContainer'>    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name="">    <input type="checkbox" name=""></div> <script language="JavaScript">    var checked = 0;    var checkboxes = document.getElementById('checkBoxContainer').getElementsByTagName('input');        for (var i=0; i<checkboxes.length; i++)        if (checkboxes[i].type == 'checkbox')            checkboxes[i].onchange = function ()            {                if ( (checked += this.checked ? 1 : -1) > 5)                {                    checked--;                    this.checked = false;                }            }</script>
PS: It appears that 13 code lines of pure JS works as good as 11 code lines of jQuery + the jQuery itself :twisted:
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: click up to 5 checkboxes

Post by pickle »

@~ kaszu - You need to remove the "disabled" attribute, not just set it to false. Please also use the tags to colour your code.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: click up to 5 checkboxes

Post by kaszu »

Forgot about highlighting :oops:
Setting 'disabled' to true/false does the trick (checked on FF, IE6, IE7, Safari), but I remember that I was removing this attribute in JS in previous project (wasn't using jQuery). Only can't remember why at the moment, anyone!?

onchange is fired only after focus is lost in IE, so you need to bind to onclick also.

I agree that jQuery was way too much for this problem, but I was tired and couldn't/didn't wanted to think (bad excuse, I know :D).
Post Reply