Quick code snippet. Assume you have:
<p>Best Cheese? Please select the three:</p> <div> <label><input type="checkbox" name="Cheddar" value="1" class="limitThree">Cheddar</label> <label><input type="checkbox" name="Cheshire" value="1" class="limitThree">Cheshire</label> <label><input type="checkbox" name="Creamy Lancashire" value="1" class="limitThree">Creamy Lancashire</label> <label><input type="checkbox" name="Cheshire" value="1" class="limitThree">Double Gloucester</label> <label><input type="checkbox" name="Red Leicester" value="1" class="limitThree">Red Leicester</label> <label><input type="checkbox" name="Stilton " value="1" class="limitThree">Stilton</label> <label><input type="checkbox" name="Wensleydale" value="1" class="limitThree">Wensleydale</label> </div>
Then you could use the following jQuery:
$('.limitThree').on('change', function(){ var noChecked = 0; $.each($('.limitThree'), function(){ if($(this).is(':checked')){ noChecked++; } }); if(noChecked >= 3){ $.each($('.limitThree'), function(){ if($(this).not(':checked').length == 1){ $(this).attr('disabled','disabled'); } }); }else{ $('.limitThree').removeAttr('disabled'); }; });