Allowing a user to select only a certain amount of checkboxes - php

Question

I have a checkbox and i want the user to choose at maximum 3. I can't figure out how to do this.
artificial intelligence <input type = "checkbox" name = "topic[]" value = "29" >
computer graphics <input type = "checkbox" name = "topic[]" value = "30" >
computer animation <input type = "checkbox" name = "topic[]" value = "31" >
software engineering <input type = "checkbox" name = "topic[]" value = "32" >

Answer 1

Have you thought about how the UI would handle this? Here is one approach using jQuery:
// adjust this to be all checkboxes in the group
var theCheckboxes = $("input[type='checkbox']");
theCheckboxes.click(function()
{
if (theCheckboxes.filter(":checked").length > 3)
$(this).removeAttr("checked");
});
http://jsfiddle.net/jyYu5/
This prevents a check after three are marked, but does not visually disable the fields. So that's something additional to consider.
Also, you still have to check on the server side that only three were marked, because the user can obviously submit whatever data he wants.

Answer 2

You can do this with jQuery really easily. Probably a bit harder with straight javascript, but not to much.
Load jQuery, and write a function to execute on click of a checkbox. In that function is an if statement asking two things, it the button currently unchecked and are there more than x number of buttons checked currently. If both are true, then prevent default.
Here's what it should look like:
<input class="checkbox"></input>
$('.checkbox').click(function(){
if ($(this:not(:checked)) && $(".checkbox:checked").length >= 3) {
event.preventDefault()
}
});
That should prevent checking more then 3 check boxes.

Answer 3

well obviously you want some client side validation.... use javascript....
there are several ways to do it...
like plain javascript you can do something like
<script>
var predefined_limit = 3;
document.getElementByTagName('input').onchange = doSomething
function doSomething(){
var counter=0;
var elem = document.getElementByTagName('input');
for(var i=0; i<elem.length; i++)
if(elem.type=='checkbox' && elem.checked == true)
counter ++;
if(counter > predefined_limit){
this.checked = false;
alert('You can check only '+ predefined_limit + 'checkboxes')
}
}
</script>
then you can also use jQuery or other javascript frameworks like the other answer suggests

Answer 4

With jQuery, you can count checked checkboxes like that :
//Count number of checkboxes
$('input[name="type[]"]').on('click', function() {
var nbcheck = $('input[name="type[]"]:checked').length;
if(nbcheck > 2) {
console.log('FORBIDEN!!!!');
//Do stuffs you want -->
}
});