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, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

6 Responses to "Disable All or Selective Controls on a Page using jQuery"
  1. AzadSingh said...
    April 4, 2010 at 11:03 PM

    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

  2. rick said...
    September 10, 2010 at 4:14 AM

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

    Thanks

    José

  3. Suprotim Agarwal said...
    September 10, 2010 at 5:59 AM

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

  4. rick said...
    September 10, 2010 at 6:51 AM

    Hi Suprotim,

    Your answer was very helpful.
    Many thanks.

    Rick

  5. Anonymous said...
    November 18, 2012 at 1:30 AM

    its superb.... very helpful foe me

  6. Martin Meeser said...
    June 26, 2013 at 6:28 AM

    Thank you very helpful.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions