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






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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

Unknown 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');

Unknown said...

Hi Suprotim,

Your answer was very helpful.
Many thanks.

Rick

Anonymous said...

its superb.... very helpful foe me

Unknown said...

Thank you very helpful.