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.

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

Bookmark this link on del.icio.us (saved by 0 users)

Did you like this post?



	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

comments

1 Response to "Disable All or Selective Controls on a Page using jQuery"

AzadSingh said...

April 4, 2010 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

March 2, 2010