Announcement

**Zvona** · Jul 11, 2002, 06:47 AM

Following example enables / disables submit button. Replace that with textbox :

Code:

[size=1]<!-- Example Written by Zvona -->
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1;" />
 	</head>

	<body>
		<form action="">
			<input type="checkbox" onclick="this.form.btnSubmit.disabled = !this.checked;">
				Check this in order to submit
			<br /><br />
			<input name="btnSubmit" type="submit" value="Submit" disabled="disabled" />
		</form>
	</body>
</html>[/size]

**requestcode** · Jul 11, 2002, 08:30 AM

Here is another example that works in NS4, IE5+ and NS6.

Code:

<html>
<head>
<title>Disable Text Box</title>
     <SCRIPT LANGUAGE="JavaScript">
               function DisBox() 
                   {
                    if(document.Distbox.disb.checked)
                      {
                       document.Distbox.txta.blur()     
                       document.Distbox.txta.disabled=true                  
                      }
                   else
                      {
                       document.Distbox.txta.disabled=false
                      }
                   }   
       </SCRIPT>
</head>
<body bgcolor="lightgreen">
 <CENTER>
  <FORM NAME="Distbox">
        <BR><BR><BR><BR>
         Check here to disable text box: <INPUT TYPE="checkbox" NAME="disb" onClick="DisBox()"> 
         <INPUT TYPE="text" NAME="txta" SIZE="30" onFocus="DisBox()">
  </FORM>
  </CENTER>
</body>
</html>

**Roy Sinclair** · Jul 11, 2002, 04:32 PM

Here's a more generic set of functions set in an example page (this one also supports obsolete browsers like Netscape 4).

<html>
<head>
<script>
function disableField(myField)
{
myField.disabled = true
return true
}
function enableField(myField)
{
myField.disabled = false
return true
}
function onfocusField(myField)
{
if (myField.disabled)
{
myField.blur()
return false
}
return true;
}
// The above functions are generic, the following function is specific to this page
function toggleFields(myField)
{
if (myField.checked)
{
disableField(document.forms["example1"].text1)
disableField(document.forms["example1"].checkbox1)
disableField(document.forms["example1"].select1)
}
else
{
enableField(document.forms["example1"].text1)
enableField(document.forms["example1"].checkbox1)
enableField(document.forms["example1"].select1)
}
document.forms["example1"].text1
}
</script>
</head>
<body>
<form name="example1">
Disable Fields: <input type="checkbox" name="control1" onclick="toggleFields(this)" checked="checked">
<br>
Text Field: <input type="text" name="text1" onfocus="return onfocusField(this)">
<br>
Check box: <input type="checkbox" name="checkbox1" onfocus="return onfocusField(this)" onclick="return onfocusField(this)">
<br>
Select: <select name="select1" onfocus="return onfocusField(this)">
<option></option>
</select>
</form>
<script>
disableField(document.forms["example1"].text1)
disableField(document.forms["example1"].checkbox1)
disableField(document.forms["example1"].select1)
</script>
</body>
</html>

**glenngv** · Jul 12, 2002, 12:06 AM

simplest version:

Code:

<html>
<head>
<script>
function enableDisable(){
		var disable = true;
		var arglen = arguments.length;
		var startIndex = 0;
		var frm = document.example1;//change appropriate form name
		if (arglen>0){
			if (typeof arguments[0]=="boolean") {
				disable=arguments[0];
				if (arglen>1) startIndex=1;
			}
			for (var i=startIndex;i<arglen;i++){
				obj = eval("frm."+arguments[i]);
				if (typeof obj=="object"){
					if (document.layers) {
						if (disable){
							obj.onfocus=new Function("this.blur()");
							if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
						}
						else {
							obj.onfocus=new Function("return");
							if (obj.type=="text") obj.onchange=new Function("return");
						}
					}
					else obj.disabled=disable;
				}
			}
		}
	}
</script>
</head>
<body>
<form name="example1">
Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this.checked,'text1','checkbox1','select1')">
<br>
Text Field: <input type="text" name="text1">
<br>
Check box: <input type="checkbox" name="checkbox1">
<br>
Select: <select name="select1">
<option></option>
</select>
</form>
</body>
</html>

**wildman77** · Sep 14, 2005, 03:23 PM

I like glenngv's option the best, I just need it to be the opposite... I need it to default disabled, and then when you click the check box, it enables the field. Is there a simple way to modify a few lines of this existing code to make that work, or is it a totally different script?

thanks guys!
Dave

**vwphillips** · Sep 14, 2005, 05:30 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips [url]http://www.vicsjavascripts.org.uk/[/url]

function Disable(obj,state){
 clds=obj.parentNode.childNodes;
 if (!obj.ary){
  obj.ary=new Array();
  for (i1=0;i1<clds.length;i1++){
   if (clds[i1].tagName=='INPUT'||clds[i1].tagName=='SELECT'||clds[i1].tagName=='TEXTAREA'){
    obj.ary[obj.ary.length]=clds[i1];
   }
  }
 }
 for (i=0;i<obj.ary.length;i++){
  obj.ary[i].removeAttribute('disabled');
 }
 if (obj.checked==state){
  for (i1=0;i1<obj.ary.length;i1++){
    obj.ary[i1].setAttribute('disabled','disabled');
  }
 }
 obj.removeAttribute('disabled');
}

//-->
</script>

</head>

<body>
<span >
<input type="checkbox" name="" disabled="disabled" >
<input type="text" name="" disabled="disabled" >
<select disabled="disabled" ><option>Select</option></select>
<input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
</span>
<br>
<span >
<input type="checkbox" name=""  >
<input type="text" name=""  >
<select ><option>Select</option></select>
<input type="checkbox" name="" onclick="Disable(this,true);" > Disable/Enable
</span>

<br>
<br>

</body>

</html>

**wildman77** · Sep 15, 2005, 10:24 AM

thanks for your help, Vic.

too bad it seems limited to being in the same line. If you place any of the fields in table cells away from the checkbox that will enable them, I can't get it to work. So I just added "!" to one of the lines of Glen's code and now his does the opposite, so it works the best for me at this point.

My only issue with Glen's option now is getting it to work for multiple forms within one page. I can't figure out where in the script to add multiple form names so that each form has it's own enable/disable checkbox feature.

**glenngv** · Sep 15, 2005, 11:47 PM

Code:

<html>
<head>
<script type="text/javascript">
function enableDisable(oChk){
		var disable = !oChk.checked;
		var arglen = arguments.length;
		var obj, startIndex = 1;
		var frm = oChk.form;
		for (var i=startIndex;i<arglen;i++){
			obj = frm.elements[arguments[i]];
			if (typeof obj=="object"){
				if (document.layers) {
					if (disable){
						obj.onfocus=new Function("this.blur()");
						if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
					}
					else {
						obj.onfocus=new Function("return");
						if (obj.type=="text") obj.onchange=new Function("return");
					}
				}
				else obj.disabled=disable;
			}
		}
	}
</script>
</head>
<body>
<form name="example1">
Enable/Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this,'text1','checkbox1','select1')" />
<br />
Text Field: <input type="text" name="text1" disabled="disabled" />
<br />
Check box: <input type="checkbox" name="checkbox1" disabled="disabled" />
<br />
Select: <select name="select1" disabled="disabled" />
<option>option1</option>
</select>
</form>
<form name="example2">
Enable/Disable Fields: <input type="checkbox" name="control2" onclick="enableDisable(this,'text2','checkbox2','select2')" />
<br />
Text Field: <input type="text" name="text2" disabled="disabled" />
<br />
Check box: <input type="checkbox" name="checkbox2" disabled="disabled" />
<br />
Select: <select name="select2" disabled="disabled" />
<option>option1</option>
</select>
</form>
</body>
</html>

**vwphillips** · Sep 16, 2005, 02:56 AM

the script I posted has been slightly updated to cope with loacal, global and nested applications. The original was a 5 min 'in concept'

see http://www.vicsjavascripts.org.uk/Fo...endium.htm#f40

has greater flexibility than alternatives

Announcement

how to enable & disable a text field in javascript?

how to enable & disable a text field in javascript?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment