How to uncheck one, definite checkbox?

**theriel** · 08-25-2007, 11:47 AM

Hello!
I have a small question -> how to uncheck a checkbox using JS? I have a script counting the number of checkboxes checked. When the number is higher than 5, after clicking another checkbox, I would like to make it automatically unchecked (in the way that it is impossible to check more than 5 boxes).

I know that I can use:
document.form_name.chboxes[i].checked=false;

however, having:
<input name="chboxes" value="Blue" type="checkbox" onclick="function()">
<input name="chboxes" value="Green" type="checkbox" onclick="function()">
<input name="chboxes" value="Red" type="checkbox" onclick="function()">

I don't know which one was pressed, so I do not know the "i" number of the array. I thought about using this (= the sending object of the function), however I do not know which variable should be changed. I tried:

this.checked=false;

but it doesn't work... And all the scripts in the internet usually are "uncheck all" which is fairly easy - just use the function presented above for i<length of the array...

Thank you for your help!
Greetings,
Theriel

**jscheuer1** · 08-25-2007, 03:27 PM

Making it so that a check box cannot be checked (or unchecked) is to set its disabled attribute to 1, setting it to 0 will enable the check box again. It would be far easier to simply disable all check boxes that aren't checked after the 5th check box is checked, rather than wait until the user attempts to check a 6th check box. Then if the user unchecks one of the checked check boxes, you can re-enable all of the disabled ones.

**jscheuer1** · 08-25-2007, 05:31 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boxes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
fieldset {
width:11em;
}
legend {
color:blue;
padding:0 1ex;
}
</style>
<!--[if IE]>
<style type="text/css">
legend {
padding-right:1.5ex;
}
</style>
<![endif]-->
<script type="text/javascript">
function check(f){
var  c = i = 0, b = f.elements;
for (i ; i < b.length; i++)
if(b[i].type&&b[i].type=='checkbox'&&b[i].checked)
c++;
for (i = 0 ; i < b.length; i++)
if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked)
b[i].disabled=c==5;
}

</script>
</head>
<body>
<form action="#" onclick="check(this);">
<fieldset><legend>Boxes</legend><input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br>
<input type="checkbox" name="" value=""><br></fieldset>
</form>
</body>
</html>

**Rockonmetal** · 08-26-2007, 11:36 PM

Hey thats a cool script how do you get it to disable the unchecked ones once 1 check box is selected?

**jscheuer1** · 08-27-2007, 04:40 AM

Originally Posted by Rockonmetal

Hey thats a cool script how do you get it to disable the unchecked ones once 1 check box is selected?

That's what radio buttons are for. But it's simple to do for check boxes, just change this line:

Code:

b[i].disabled=c==5;

to:

Code:

b[i].disabled=c;

For any other number of check boxes, use that number. For only two check boxes allowed, use:

Code:

b[i].disabled=c==2;

**tastypopsicle** · 09-10-2007, 03:26 PM

Firstly, jscheuer1, great example. I have made a simple modification to allow a max value to be passed into the function so that the function can be easily reused.

Code:

function check(f,m){
	var  c = i = 0, b = f.elements;
	for (i; i < b.length; i++)
	if(b[i].type&&b[i].type=='checkbox'&&b[i].checked)
		c++;
	for (i = 0; i < b.length; i++)
		if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked)
			b[i].disabled=c==m;
}

Where m = the maximum number of checkboxes that can be checked.

My question involves restricting the validation to a specific fieldset rather than the entire form. In this example if you have a checkbox outside of the group it still counts in the calculation. Additionally, you could not use this code in a form where you needed to restrict the number of selected options in one fieldset and restrict the number of options selected in another fieldset.

What do you suppose could be done to modify your example to work as I have described?

Thank you,
Ed

**tastypopsicle** · 09-10-2007, 04:34 PM

Here is the updated function to limit the number of checkboxes that can be checked in a fieldset

Code:

function check(f,o,m){
	var  c = i = 0, b = f.elements;
	for (i; i < b.length; i++)
	if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o)
		c++;
	for (i = 0; i < b.length; i++)
		if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o)
			b[i].disabled=c==m;
}

Just be sure to give the fieldset a unique ID

Code:

<fieldset id="options">

Call the function from the form onclick. Be sure to set the number of checkable checkboxes. In this case I limit it to 1

Code:

<form action="#" id="sampleform" onclick="check(this,'options',1);">

To restrict the number of checkboxes that can be checked in multiple fieldsets include each call in the form's onclick

Code:

<form action="#" id="sampleform" onclick="check(this,'options',1);check(this,'moreoptions',5);">

In the fieldset with the ID of "options" you can check one checkbox. In the fieldset with the ID of "moreoptions" you can check five checkboxes.

Thread: How to uncheck one, definite checkbox?

Thread Tools

Search Thread

How to uncheck one, definite checkbox?

Restrict example to a fieldset

I've answered my own question

Bookmarks

Bookmarks

Posting Permissions