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
Tweet
About The Author
6 comments:
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
Can any one tell me if is possible, by using the same approach, disable elements inside a specific div or element?
Thanks
José
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');
Hi Suprotim,
Your answer was very helpful.
Many thanks.
Rick
its superb.... very helpful foe me
Thank you very helpful.
Post a Comment