Disable And Enable Input Elements In A Div Block Using jQuery

Submitted by sudheer on Fri, 11/07/2008 - 00:39

Today, we will learn how to toggle the 'disabled' attribute of input elements in a div block using jQuery.

The 'disabled' attributed is set to HTML input elements where user input is not desirable. When 'disabled' attribute is set to an input element, it is rendered read only. The read only input elements make lot of sense in various contexts.

<input type="text" name="elementName" disabled="disabled" />

Wouldn't it be more fun if we play around with the 'disabled' attribute programmatically? We are going to do exactly the same in this example.

You can see the example page here.

A sample text, checkbox, radio and select element is included in a div block. A button is provided to toggle the disabled attribute of the sample input elements. Let us examine the page and the solution in detail.

Let us first write the HTML head part.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Tech Chorus - Hiding Input Elements In A Div With jQuery</title>

As the title suggests, we will make use of jQuery to manipulate the Document Object Model. Like many popular JavaScript libraries jQuery is available from a CDN. Let us make use of the jQuery Content Delivery Network to include the latest jQuery in our web page.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Let us write a JavaScript function to handle the toggling and name it as toggleStatus.

<script type="text/javascript">

I'll explain what's going on in this part once we complete building the page.

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#elementsToOperateOn :input').attr('disabled', true);
    } else {
        $('#elementsToOperateOn :input').removeAttr('disabled');
    }   
}

Close the 'head' section.

</script>
</head>

Start the 'body' tag.

<body>
<p>
This is our sample page. The article can be found at <a href="http://techchorus.net/disable-and-enable-input-elements-div-block-using-jquery">Tech Chorus</a>
</p>

Create the form and the checkbox element to handle toggling of 'disabled' attribute for the input elements in the div.

<form method="post" action="">
    <p>
        When you click the below button, all the input elements in the div are disabled, if they are enabled and vice versa.
    </p>
    <p>
    Click to change: <input id="toggleElement" type="checkbox" name="toggle" onchange="toggleStatus()" />
    </p>

Create the sample input elements and wrap it in a div. Also close the 'form', 'body' and 'html' tags.

 <div id="elementsToOperateOn">
        This is our example div block. <br />
        Sample Text Box: <input type="text" name="name" /> <br />
        Sample Checkbox : <input type="checkbox" name="participate" /> <br/>
        Sample Radio : <input type="radio" name="bookEarly" /> <br />
        Sample Select: <select name="sampleSelect">
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
    </div>
</form>
 
</body>
</html>

Discussion

Let us discuss the flow of the script. When the checkbox input element with id 'toggleElement' is clicked, the function toggleStatus() is fired.

Click to change: <input id="toggleElement" type="checkbox" name="toggle" onchange="toggleStatus()" />

We have defined the function toggleStatus() in the head section of the HTML document. Within the function toggleStatus() we check whether the element with id 'toggleElement' is checked.

$('#toggleElement').is(':checked')

jQuery provides wonderful DOM node selectors. $('#toggleElement') selects the node with id 'toggleElement'. You can use .is(':checked') to evaluate whether the input element is checked. If checked, we grab all the input elements within the div whose id is 'elementsToOperateOn' and set the attribute 'disabled' on all of them. To select all the input elements in the div we use:

$('#elementsToOperateOn :input')

To set the 'disabled' attribute on the selected nodes, we just use

.attr('disabled', true)

In our example page, we combine the above two code snippets to do more in less lines.

$('#elementsToOperateOn :input').attr('disabled', true);

Similarly, when the 'toggleElement' is not checked, we grab all the input elements in the div 'elementsToOperateOn' and remove the 'disabled' attribute. If you carefully observe the jQuery code, it is very much like English. Naturally, it is easier to remember the code that looks like English.

We are done with our first how to example on this site. In the coming days, I will publish more articles. I have actually drafted few already. Stay tuned.

Bookmark/Search this post with

About the author

Sudheer is an entrepreneur and software developer. Get more from Sudheer on Twitter.

Similarly, when the

Submitted by boediger (not verified) on Thu, 02/12/2009 - 23:40.

Similarly, when the 'toggleElement' is not checked, we grab all the input elements in the div 'elementsToOperateOn' and remove the 'disabled' attribute. If you carefully observe the jQuery code, it is m=very much like English. Naturally, it is easier to remember the code that looks like English.

Thanks. Corrected the typo.

Submitted by sudheer on Thu, 08/27/2009 - 14:16.

Thanks. Corrected the typo.

great! i changed it to

Submitted by Guest (not verified) on Wed, 02/18/2009 - 13:04.

great!

i changed it to this:

if ( $("#preview").attr('hidden', true)){

$('#postform :input').attr('disabled', false);
}

Consider the security and

Submitted by Heraklesr Bahid (not verified) on Thu, 05/10/2012 - 17:15.

Consider the security and utility pacquiao vs bradley issues of carrying around a laptop.

Radio

Submitted by Steven (not verified) on Mon, 06/29/2009 - 18:13.

Hi, very nice script, just what I'm looking for! So, I tried the same thing with a radio, but it didn't worked out...

Hope you can help me, Steven.

What happened when you tried?

Submitted by sudheer on Thu, 08/27/2009 - 14:16.

What happened when you tried? Did you look for error messages in the firebug console?

Lovely post

Submitted by Guest (not verified) on Tue, 06/30/2009 - 10:37.

Gotta love this site! keep it up :)

Enabling the form from disable status

Submitted by Deb (not verified) on Fri, 07/10/2009 - 18:25.

Hi ,

Can it be done? I want to make the form disabled by default. When the Check box is checked then the form will be enabled.

Thanks,
Deb

Why not? Just remove the

Submitted by sudheer on Thu, 08/27/2009 - 14:18.

Why not? Just remove the disabled attribute in all the input elements.

$('#elementsToOperateOn :input').removeAttr('disabled');

I Try Not Working

Submitted by Adil (not verified) on Tue, 03/16/2010 - 04:42.

Hello,

I try this but its not working properly..... what i need i need by default it disabled and if i click on checkbox then my all values should be enable that's it..... but i tried its not working

looking for your reply
Adil

Can you post your code to a

Submitted by sudheer on Tue, 03/16/2010 - 13:47.

Can you post your code to a pastebin and paste the URL here?

What you have to do is:
1. Set the disabled attribute to disabled on your form elements
2. Change the JavaScript toggle code

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#elementsToOperateOn :input').removeAttr('disabled');
    } else {
        $('#elementsToOperateOn :input').attr('disabled', true);
    }   
}

I have included a demo page that does what you want.

great!!! It solved my problem

Submitted by Moidul (not verified) on Wed, 08/19/2009 - 07:51.

great!!! It solved my problem

set checkbox on readonly

Submitted by barttec (not verified) on Mon, 09/14/2009 - 15:53.

Can this be done in jquery?

I don't want to disable my checkbox as the value will not be comitted then.
So I want some sort of readonly on my checkbox, user cannot check/uncheck but value does get committed.

Sure. Replace 'disabled' with

Submitted by sudheer on Mon, 09/14/2009 - 17:18.

Sure.

Replace 'disabled' with 'readonly' in our code.

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#elementsToOperateOn :input').attr('readonly', true);
    } else {
        $('#elementsToOperateOn :input').removeAttr('readonly');
    }   
}

Fix for IE?

Submitted by Guest (not verified) on Fri, 10/16/2009 - 05:16.

It doesnt work properly in IE7 (and 6 i assume).

I had tested the code snippet

Submitted by sudheer on Fri, 10/16/2009 - 12:16.

I had tested the code snippet on IE 6 and 7 as well. What issue are you facing with them?

Hi there, great works,

Submitted by Guest (not verified) on Sun, 10/25/2009 - 15:37.

Hi there,
great works, thanks.
Why there seems to be problem with IE? when you click on radio to disable it. It does not show the changes immediatly, unless you click on the page...
Please advise

When you click radio or

Submitted by sudheer on Tue, 10/27/2009 - 00:12.

When you click radio or checkbox? What version of IE are you using?

Can you download the file from the Code Album git repository at http://github.com/bngsudheer/Code-Album/blob/master/web/js/jquery/div-di... and try it on your computer?

IE problem

Submitted by Guest (not verified) on Fri, 04/20/2012 - 10:51.

Hi
I had the same problem - I found that when you check/uncheck the checkbox the changes don't happen immediately like in Firefox - you have to click on the page (anywhere) for it to apply.
Thank you in advance

Thanks!

Submitted by Ricardo (not verified) on Sun, 11/15/2009 - 10:17.

Hey !

Thank you for that. It helped me a lot.

I was looking for something

Submitted by film izle (not verified) on Wed, 11/18/2009 - 03:35.

I was looking for something like this. Thanks!

I like this code

Submitted by Frank Pipolo SEO (not verified) on Tue, 01/26/2010 - 06:12.

I like to use this code:

This is one area where I like to extend jQuery:

$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}

$.fn.enable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = false;
});
}

and then you can do:

$("#button").disable();
$("#button").enable();

I find myself disabling/enabling controls a lot.

How would I go about

Submitted by Austin (not verified) on Mon, 03/01/2010 - 22:12.

How would I go about disabling fields for an option from a select drop down box?

jquery is excellent addition

Submitted by Guest (not verified) on Sat, 03/13/2010 - 17:45.

jquery is excellent addition it is good to use and easy to tackle it so it has more advantages.i found this informative and interesting blog so i think so its very useful and knowledge able.so it is great usability and good for us.so thanks for the nice post..so i appreciate to your efforts.

For a dropdown list, if only

Submitted by Guest (not verified) on Fri, 05/21/2010 - 15:49.

For a dropdown list, if only one value is present, that value showld be defaulted and if many values are present, default value should be null. Can you please provide the sample code for this

Hi, great coding, thank you

Submitted by Guest (not verified) on Tue, 06/15/2010 - 08:54.

Hi, great coding, thank you very much.

FYI - I also have same issue using IE8.

'Why there seems to be problem with IE? when you click on radio to disable it. It does not show the changes immediatly, unless you click on the page...'

Came across this post in my

Submitted by Guest (not verified) on Tue, 06/15/2010 - 09:21.

Came across this post in my searching.. May explain why not working in IE?

http://www.lattimore.id.au/2005/06/18/disable-options-in-a-select-dropdown-element/

what is this for?

Submitted by essay papers (not verified) on Thu, 08/05/2010 - 03:52.

what is this for?

oyunlar

Submitted by oyun (not verified) on Sat, 07/31/2010 - 00:52.

thanks you
You will have to crawl very nice,owe you gratitude..

How would i make this

Submitted by Guest (not verified) on Thu, 08/26/2010 - 02:44.

How would i make this work???
I would like the Check Box to be disabled if Option 2 is selected in the drop down menu.

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/JavaScript">
 
function toggleStatus() {
    if ('#toggleElement.option.value == 2') {
        $('#elementsToOperateOn :input').attr('disabled', true);
    } else {
        $('#elementsToOperateOn :input').removeAttr('disabled');
    }   
}
 
</script>  
<body>
<form method="post" action="">
If you Select Option 2:
<select id="toggleElement" onchange="toggleStatus()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
 
<br><br>
 
 
<div id="elementsToOperateOn">
This becomes Disabled...
<input type="checkbox">
</div>
 
</form>
</body>
</html>

The expression in if is

Submitted by sudheer on Fri, 08/27/2010 - 16:14.

The expression in if is slightly wrong.

It should be:

function toggleStatus() {
    if ( $('#toggleElement').val() == '2') {
        $('#elementsToOperateOn :input').attr('disabled', true);
    } else {
        $('#elementsToOperateOn :input').removeAttr('disabled');
    }   
}

This works the first time option val changes, but not subsequent

Submitted by lafz on Tue, 06/28/2011 - 23:14.

I am trying the same thing, though I am enabling two radio boxes when either one or another option is chosen (either temp or precip). It works the first time an option is selected, but if I try the dropdown box again, it doesn't reset to 'disabled'. Any suggestions?

<!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>Hiding Input Elements In A Div With jQuery</title></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>          
<script type="text/javascript">
//time periods
function toggleStatus() {
    if ( ($('#toggleElement').val() == 'temp') ||($('#toggleElement').val() == 'precip') ) {
        $('#elementsToOperateOn :input').removeAttr('disabled', true);
	$("#elementsToOperateOn p").removeClass('textdisabled');
 
    } else {
        $('#elementsToOperateOn :input').attr('disabled');
	$("#elementsToOperateOn p").addClass('textdisabled');
    }   
}
 
</script>
<style type="text/css">
.textdisabled {color:#999999;}
</style>
</head>
 
 
<body>
 
<form method="post" action="">
 
<h3>If you Select Option temp or precip:</h3>
<select id="toggleElement" onchange="toggleStatus()">
 
<option value="" > -- </option>
<option value="temp">temperature</option>
<option value="precip">precip</option>
<option value="other">other</option>
</select>
 
<br><br>
 
    <label>Montly Mean</label><input name="timeperiod"  id="mome" type="radio" value="mome" /><br />
    <div id="elementsToOperateOn">
        This becomes Enabled...
        <p class="textdisabled"><label>Annual Mean</label><input name="timeperiod" id="anme" type="radio" value="anme" disabled="disabled" /><br />
        <label>Climate Anomaly</label><input name="timeperiod" id="anom" type="radio" value="anom" disabled="disabled"/><br />
         </p>
    </div>
        <input type="reset" name="reset" value="reset"/>
</form>
 
</body>
</html>

enable or disable button

Submitted by Pradeep (not verified) on Fri, 09/03/2010 - 23:28.

@ sudheer on Fri, 08/27/2010 - 16:14.

I agree. Your code worked for me.

what i need i need by default

Submitted by earth4energy (not verified) on Sun, 09/05/2010 - 22:34.

what i need i need by default it disabled and if i click on checkbox then my all values should be enable that's it..... but i tried its not working

Please show us the code you

Submitted by sudheer on Mon, 09/06/2010 - 00:39.

Please show us the code you tried

Works great, but...

Submitted by Ryan (not verified) on Mon, 09/13/2010 - 12:02.

First of all, thanks! This worked great and it was easy to set it up for disabled to be default and enable when the checkbox is clicked.

The trouble I ran into was having multiple instances, i.e. checkbox 1 enables div 1, and checkbox 2 enables div 2. The solution I came to was having two functions doing the same thing. I know...LAME. I don't know jquery or javascript well enough to write one function that can be used by both checkboxes and only enable the corresponding div. How could this code be adapted to do that?

Anyhow, thanks for this...it helped alot!

There's nothing wrong in

Submitted by sudheer on Mon, 09/13/2010 - 15:17.

There's nothing wrong in writing 2 functions, especially when you are learning JavaScript and jQuery.

Try it. If you run into problem, feel free to post a comment here or in our forums.

why not use bind for the

Submitted by Guest (not verified) on Mon, 10/11/2010 - 06:52.

why not use bind for the exampleS?

don't work in IE7

Submitted by Guest (not verified) on Tue, 11/23/2010 - 08:30.

I tried your example page in IE7. It does not work.

Details please

Submitted by sudheer on Tue, 11/23/2010 - 14:16.

Which version of IE? What doesn't work?

additionally block ui with gray layer

Submitted by Jaime (not verified) on Mon, 11/29/2010 - 22:31.

Thank you very much, you can combine this functionality with blockui plugin to cover some portions of the screen with a gray layer.

http://malsup.com/jquery/block/#element

access label elements of a div

Submitted by Guest (not verified) on Fri, 12/03/2010 - 03:48.

Is there a way to access all the label elements within a div, rather than input elements?

trying like this $('#mydivid :label') gives exception..

thanks so much!

You can make the text "enable" and disable too

Submitted by Andrea (not verified) on Wed, 12/08/2010 - 00:36.

I love, love, love this. I wanted to make the text go gray with the inputs, so I put everything inside the div into a p tag and added and removed the css class to the p in the same function calls. Thanks so much for getting me started!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Tech Chorus - Hiding Input Elements In A Div With jQuery</title>
<!-- Copyright - Sudheer .S - <a href="http://sudheer.net" title="http://sudheer.net">http://sudheer.net</a> !-->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>        
 
<script type="text/javascript">
function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#elementsToOperateOn :input').attr('disabled', true);
		$("#elementsToOperateOn p").addClass('textdisabled');
 
 
    } 
	else {
        $('#elementsToOperateOn :input').removeAttr('disabled');
		$("#elementsToOperateOn p").removeClass('textdisabled');
 
    }   
}
</script>
<style type="text/css">
.textdisabled {color:#999999;}
</style>
 
</head>
 
<body>
<p>
This is our sample page. The article can be found at <a href="http://techchorus.net/disable-and-enable-input-elements-div-block-using-jquery">Tech Chorus</a>
 
</p>
 
<form method="post" action="">
    <p>
        When you click the below button, all the input elements in the div are disabled, if they are enabled and vice versa.
    </p>
    <p>
    Click to change: <input id="toggleElement" type="checkbox" name="toggle" onchange="toggleStatus()" />
    </p>
    <div id="elementsToOperateOn">
<p>
        This is our example div block. <br />
        Sample Text Box: <input type="text" name="name" /> <br />
        Sample Checkbox : <input type="checkbox" name="participate" /> <br/>
        Sample Radio : <input type="radio" name="bookEarly" /> <br />
        Sample Select: <select name="sampleSelect">
 
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
  </p>  </div>
</form>
 
</body>
</html>

oops paragraph not needed

Submitted by Andrea (not verified) on Wed, 12/08/2010 - 00:40.

$("#elementsToOperateOn").addClass('textdisabled');

would work with your first example. duh me.

Only problem was it wouldn't work on IE unless you clicked away from the checkbox afterwards.

Changed the onchange event to onclick and works like a charm!

Can you explain what you did?

Submitted by Jackie (not verified) on Fri, 07/22/2011 - 02:47.

Can you explain what you did? I am having the same problem in IE.

+1

Tech Chorus feeds

Subscribe By Email

Navigation

User login

Popular content

All time:

Recent comments

Disable And Enable Input Elements In A Div Block Using jQuery

Discussion

Comment viewing options

Post new comment

Relevant Content