Disable All or Selective Controls on a Page using jQuery

Disabling controls on a Page using jQuery is a cakewalk, thanks to the wonderful Selector API. Here’s an example. I have kept a couple of controls on the page and will show you some ways to disable all or selective controls on a Page using jQuery.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Disable All Controls on a Page</title>
<
script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js">
</
script>
<script type="text/javascript">
$(function() {
$("#disableAll").click(function() {
$("*").attr('disabled', 'disabled');
});
});
</script>
</
head>
<
body>
<
input id="Button1" type="button" value="button" /><br />
<
input id="Text1" type="text" /><br />
<
input id="Checkbox1" type="checkbox" /><br />
<
input id="Radio1" type="radio" /><br />
<
textarea id="TextArea1"
cols="20" rows="2"></textarea><br />
<
select id="Select1">
<
option>One</option>
<
option>Two</option>
</
select><br />
<
input id="disableAll" type="submit"
class="disb" value="Disable All" />
</
body>
</
html>

The code shown above disables all the controls on the page. Now if you want to disable only certain type of controls, use this piece of code instead

$(function() {
$("#disableAll").click(function() {
$('input, textarea, select')
.attr('disabled', 'disabled');
});
});

and to be able to filter out one particular control, like to prevent the ‘Disable All’ button from getting disabled, use this piece of code

$(function() {
$("#disableAll").click(function() {
$('input:not(.disb), textarea, table, select')
.attr('disabled', 'disabled');
});
})

Observe that the button ‘Disable All’ has the class '.disb' and we are using the input:not(.disb) selector to select all input elements without the .disb class.

Disable ALL jQuery

Note: To be able to use it on an ASP.NET Page, just replace the HTML controls with Server controls. There’s no change needed in the jQuery code unless you are doing anything specific to your requirement.

Here’s a Live Demo



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

6 comments:

AzadSingh said...

hi.., myself is azad singh, i have just started to learn .net few times, so i am have no idea about this, but after read your post, i feel, it is really informative information. thanks

rick said...

Can any one tell me if is possible, by using the same approach, disable elements inside a specific div or element?

Thanks

José

Suprotim Agarwal said...

Rick: The best way would be to add the class attribute to the elements you want to disable.

For eg: let us assume if you have added class="myele" to the elements - write the following code

$('.myele').attr('disabled', 'disabled');

Similarly if you want to disable all input elements inside a div

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

rick said...

Hi Suprotim,

Your answer was very helpful.
Many thanks.

Rick

Anonymous said...

its superb.... very helpful foe me

Martin Meeser said...

Thank you very helpful.