Disabling Checkboxes after specified amount are selected

Question

Hi, I have been working on a page that will allow entry into a certain part of my website if the user selects 8 out of 25 checkboxes in the right sequence.

Here is what I have working so far CLICK HERE TO SEE A LIVE VERSION

My question is, how can I completely disable the rest of the checkboxes after 8 have been chosen, so far I am using javascript to keep count, and I have an alert popup keeping them from selecting any more, but I would like to completely disable the rest of the checkboxes if possible.

Answer 1

You can do this by modifying the setChecks method as follows:

function setChecks(obj) {
    if(obj.checked) {

        checkCount = checkCount + 1;

        //note: modify this selector to specify the actual table in question,
        //of course. If this is not known beforehand (ie there are multiple
        //tables of checkboxes), you can use
        //  $(this).closest('table').find('input:checkbox:not(:checked)')
        //instead.
        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').attr('disabled', 'disabled');

    } else {

        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').removeAttr('disabled');

        checkCount = checkCount - 1;
    }
}

Unrelated to the question at hand, but hopefully helpful: I know this is a jsfiddle example and thus probably not indicative of your actual code, but you should consider using consistent formatting, especially with regard to indentation (and to a lesser extent spacing). Also, it's good habit to always use semicolons when writing javascript, even though they are sometimes optional. Readable code is much easier to debug, extend, and definitely easier for others to understand.

Another thing you can do to simplify your code is use stylesheets instead of specifying width and align in every td element, and using unobtrusive javascript instead of the onclick event in every checkbox. Those can all be replaced by a simple jQuery bind statement in your document.ready event:

$('table input:checkbox').click(setChecks);

This would require modifying setChecks to receive an event parameter instead. (Edit) Like so:

function setChecks() {
    if(this.checked) {
        ...
    } else { ... }
}

You don't actually need the event parameter because this refers to the current event target, so you can just remove that parameter altogether.

Answer 2

where you have the alert right now, use this bit of jQuery:

$('input[name=checkbox]:not(:checked)').attr('disabled','disabled');

See a fork of your code with this working: http://jsfiddle.net/fKwEQ/

Answer 3

I have simplified your code and it's here.

and this will answer your question,

    //update checkCount 
    checkCount = $(':checked').length;

    if (checkCount >= maxChecks) {
        //alert('you may only choose up to ' + maxChecks + ' options');
        $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
    } else {
        $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
    }