Enable textbox by onclick checkbox

JavaScript
1

Hi

I want to enable text boxes if click on checkbox. Here problem that text field and checkboxes in a array. my code is given below

I’m getting checkbox values from database

<input type=check box name=checkbox value=“1” /><input type=“text” name=textfield>
<input type=check box name=checkbox value=“2” /><input type=“text” name=textfield>

I want keep disable all text fields on body onload and if i click checkbox particular textbox need to enable.

please help with some soultion

thanks
Jinu

2

I think there is probably a better way to do this…but its a start.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>testing</title>

<script type="text/javascript">
	
	function disableTextBox(){
		document.test.txt1.disabled=true;
		document.test.txt2.disabled=true;	
		addListeners();
	}

	function toggleTextBox(e){
		checkbox = e.target;
		
		if(checkbox.checked == true){
			if(checkbox.name == "chk1"){
				document.test.txt1.disabled=false;
			}
			if(checkbox.name == "chk2"){
				document.test.txt2.disabled=false;	
			}	
		}
		else{
			document.test.txt1.disabled=true;
			document.test.txt2.disabled=true;		
		}		
	}

	function addListeners(){
	 	check1 = document.test.chk1;
		check2 = document.test.chk2;
		check1.addEventListener('click',toggleTextBox,false  );
		check2.addEventListener('click',toggleTextBox,false  );		
	}
	window.onload = disableTextBox;
		
</script>
</head>
<body>

	
	<form name="test">
		<input name="chk1" type="checkbox" /><input name="txt1" type="text" size="20"  value="" />
		<input name="chk2" type="checkbox" /><input name="txt2" type="text" size="20"  value="" />
	</form>


	
</body>
</html>