Enabling and disabling a text input with a checkbox using jQuery


I wanted to make a quick bit of javascript that would enable or disable a text input based on whether a checkbox was checked or not. I thought this might come in handy so I made it into a tutorial and posted it here. This script will work for any amount of checkboxes and text inputs on a page. You can see a working demo of it here.

First we start off with our blank HTML page.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enabling and disabling a text input with a checkbox using jQuery</title>
</head>
<body>
</body>
</html>

Next include the jQuery js file from Google.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Next we add our text inputs and check boxes. I have also added some labels so that you can see which check box goes with which input. I have added 3 inputs so to show that you can use this technique with multiple boxes.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox"/>
<input type="text" name="test3" />
</body>
</html>

Now I add a class to each check box so that I know which check boxes I want jQuery to watch for clicks on. You don’t have to do this but you might get some strange results if you didn’t and you had other check boxes on your page.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test3" />
</body>
</html>

I’ll also add a value to each check box, this will match the name of the input I want it to control.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />
</body>
</html>

Next, the jQuery. First of all we need the javascript tags, this normally goes at the end of the document so that the HTML & CSS are loaded before any javascript, giving the user the impression that the page is loading faster.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
//Our code will go in here
	});
</script>
</body>
</html>

This tutorial will only deal with inputs that are all enabled when the page first loads (I might write another one in the future that covers having some disabled when the page loads) so we need to make sure that all the checkboxes are checked when the page loads. I did this with javascript, this might not be the right way to do it if you want it to degrade gracefully. To check all of my checkboxes when the page loads I use the code.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
	});

Next I write some jQuery code that tells jQuery to do something whenever someone clicks one of the checkboxes with the class of ‘input_control’.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Now we do a simple if statement that says ‘if the check box was checked then set the disabled attribute to false, if the check box was unchecked then set the disabled attribute to true.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);	
			}
		});
	});

And that’s it! I’ve added the code of the completed page below and you can see a demo here. There are probably other ways of doing this, but this is the simplest way that I came up with. I did try doing this with toggle rather than using an if statement but although the disable/enable checkbox worked, the checkbox didn’t check/uncheck.

Completed Page

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);	
			}
		});
	});
</script>
</body>
</html>
  • http://www.esoterista.com xoxo

    Hello!

    This is a really useful example… do you know if it is possible only using javascript without jquery?

    Thank you!!

  • http://www.jamesowers.co.uk Jmz

    I’m certain it will be possible however I wouldn’t know how to do it.

  • http://www.ubspack.com Erik

    Is it possible to use this concept for turning off a function via checkbox. I’m using a function for pop up bubble and I would like to to disable the function via a checkbox. Is this possible?

  • http://buildasitebookmarks.com/ResourceCenter/FreeWebTools/feed Gulam Ali

    Thanks for the effort you took to expand upon this post so thoroughly.
    Why valid html code is important to your web site’s search engine optimization efforts and consequent high rankings! Such invalid html codes… A single missing bracket in your html code can be the cause your web page cannot be found in search engines… Providentially, there are free services that allow you to check and fix the validity of your html codes.