How to limit check box selections

This website http://www.plus2net.com/javascript_tutorial/checkbox-limit.php shows how to limit check box selections. I need to list 50, but only allow someone to check up to 10.

I know how to add a check box and was able to add a custom javascript to the form JavaScript under the Form Code tab. But, how can I add the needed <input type=checkbox name=ckb value=1 onclick=''chkcontrol(0)'';> to the checkbox? Without the onclick, the Javascript won't work.

Hi graphmaster,

The ; is misplaced but otherwise that looks good.

Bob

Did you get the answer to this issue?

Hi AnyTime,

OK I worked out a way to do this using a Custom LiveValidation. There are simpler ways but this one fits in with the other ChronoForms validation.

1) The Checkbox group you want to validate must have the same name - in this case it's 'check0[]' though we just use 'check0' in the script.

2) You need to add a span (or div) in your Form HTML with an matching id like 'lv_invalid_check0' to locate the error messages. I put this after the last checkbox in the group.

<input value="check 9" title="" class="radio" id="check08" name="check0[]" type="checkbox" />
      <label for="check08" class="check_label">check 9</label>
      <br />
      <span id='lv_invalid_check0'> </span>

3) Add the following script into the Form JavaScript box.

window.addEvent('load', function() {
	/* Do not change this part of the script */
  	Validate.countCheckboxes = function(elm, params){
		var p = params || {};
		elm = p.elm;
		var message = p.failureMessage || "Oops!";
		var minMessage = p.minMessage || message;
		var maxMessage = p.maxMessage || message;
		var maxChecked = p.maxChecked || check_array.length;
		var minChecked = p.minChecked || 0;
		
		var count = 0;
  		check_array.each(function(item) {
    		if ( item.checked ) {
      			count++;
    		}
 		});
		if ( count < minChecked ) {
			Validate.fail(minMessage);
		} else if ( count > maxChecked  ) {
			Validate.fail(maxMessage);
		}
		return true;
	};
	/* End : Do not change this part of the script */
	
	/* add the checkbox group name here */
	var array_name = 'check0';
	
	var check_array = $$('input[name^='+array_name+']');
	check_array.each(function(item, index) {
		var name = 'check_'+item.id;
		var e = $(item.id);
		name = new LiveValidation(e, { 
			insertAfterWhatNode: $('lv_invalid_'+name)
		});
		/* change the values below to meet your needs */
		name.add( Validate.countCheckboxes, {
			elm : e,
			minChecked : 3,
			minMessage : 'Not enough boxes checked',
			maxChecked : 5,
			maxMessage : 'Too many boxes checked'
		});
  	});
});

4) Edit the script to change the checkbox range name in the line shown

var array_name = 'check0';

5) Edit the parameters block to meet your needs. Note that there must be a comma after each paramter except the last. If you only want to limit the maximum or the minimum you can delete the other two entries (but watch the commas).

minChecked : 3,
minMessage : 'Not enough boxes checked',
maxChecked : 5,
maxMessage : 'Too many boxes checked'

Bob