How to disable all checkboxes when one checkbox is selected

**Dormilich** · Oct 25 '10, 05:34 AM

why can’t you use radio buttons? it is easier to make a radio button deselectable than make checkboxes like radiobuttons.

if that’s still not an option, deselect all checkboxes onclick and recheck the current one.

**Bharat383** · May 17 '12, 11:07 AM

Code:

<input type="checkbox" name="checkall" id="checkall" onclick="check_all()">Select All
<br>

<input type="checkbox" name="check_0" id="check_0">Option 1
<input type="checkbox" name="check_1" id="check_1">Option 2
<input type="checkbox" name="check_2" id="check_2">Option 3
<input type="checkbox" name="check_3" id="check_3">Option 4
<input type="checkbox" name="check_4" id="check_4">Option 5
<input type="checkbox" name="check_5" id="check_5">Option 6
<input type="checkbox" name="check_6" id="check_6">Option 7
<input type="checkbox" name="check_7" id="check_7">Option 8
<input type="checkbox" name="check_8" id="check_8">Option 9
<input type="checkbox" name="check_9" id="check_9">Option 10

<br><hr>

<script type="text/javascript">
function check_all()
{

	for(i=0;i<10;i++)
	{
		tmp_checkbox_id = "check_"+i;
			//alert(tmp_checkbox_id);
			if(document.getElementById("checkall").checked == true)
			{	
				//alert("hi");
				document.getElementById(tmp_checkbox_id).checked = true;
			}
			else
			{	
				//alert("bye");
				document.getElementById(tmp_checkbox_id).checked = false;
			}

	}
}
</script>

**Nicodemas** · May 20 '12, 05:01 PM

A cleaner, more dynamic solution.

When the button is clicked, all checkboxes within the parent element passed into the function are disabled. Doesn't rely on static IDs are specific number of checkboxes.

Code:

<!doctype html>
<html>

<head>
<script type="text/javascript">

function DisableAll(elementID){
  var _container = document.getElementById(elementID);
  var _chks = _container.getElementsByTagName("INPUT");
  var _numChks = _chks.length - 1;

  for(var i = 0; i <= _numChks; i++){
    _type = _chks[i].getAttribute("type");

    if(_type=="checkbox")
      _chks[i].disabled=true;
  }
}
</script>
</head>

<body>

<button type="button" onclick="DisableAll('MyForm')">Show Me</button>

<form id="MyForm">
 <input type="checkbox" name="check_0" id="check_0">Option 1
 <input type="checkbox" name="check_1" id="check_1">Option 2
 <input type="checkbox" name="check_2" id="check_2">Option 3
 <input type="checkbox" name="check_3" id="check_3">Option 4
 <input type="checkbox" name="check_4" id="check_4">Option 5
 <input type="checkbox" name="check_5" id="check_5">Option 6
 <input type="checkbox" name="check_6" id="check_6">Option 7
 <input type="checkbox" name="check_7" id="check_7">Option 8
 <input type="checkbox" name="check_8" id="check_8">Option 9
 <input type="checkbox" name="check_9" id="check_9">Option 10 
</form>

</body>

</html>

How to disable all checkboxes when one checkbox is selected

How to disable all checkboxes when one checkbox is selected

Comment

Comment

Comment