Disabel or Enable all controls in a div using jquery

This example shows you how to disable or enable all controls/elements in a div using jquery. To disable all controls you need to set the disabled attribute value to disabled using jquery attr() method. to re-enable all the controls you need to remove the disabled attribute by using jquery removeAttr() method;

Syntax

//To disable $("#divContainer").find("input, button, submit, textarea, select").attr("disabled", "disabled"); //To re-enable $("#divContainer").find("input, button, submit, textarea, select").removeAttr("disabled");

Note
Anchor(hyperlink) elements don't support disabled attribute so we have to implement on click event as e.preventDefault();. To re-enable hyperlink we have to unbind the click event.
Syntax

//To disable $("#divContainer").find("a").addClass("disablehyper").click(function (e) { e.preventDefault(); }); //To re-enable $("#divContainer").find("a").removeClass("disablehyper").unbind("click");

Example
  

UserName

Password

Rember me


Home page

Source code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .disablehyper { color: #ccc; cursor: text; } .disablehyper:hover { color: #ccc; cursor: text; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script language="javascript"> $(document).ready(function () { $("#btnDisable").on("click", function () { $("#divContainer").find("input, button, submit, textarea, select").attr("disabled", "disabled"); $("#divContainer").find("a").addClass("disablehyper").click(function (e) { e.preventDefault(); }); }); $("#btnEnable").on("click", function () { $("#divContainer").find("input, button, submit, textarea, select").removeAttr("disabled"); $("#divContainer").find("a").removeClass("disablehyper").unbind("click"); }); }); </script> </head> <body> <input type="button" id="btnDisable" value="Disable Controls" /> <input type="button" id="btnEnable" value="Enable Controls" /> <div id="divContainer" style="broder: solid 1px #ccc; padding: 10px;"> UserName<br /> <input type="text" id="txtUserName" /> <br /> Password<br /> <input type="password" id="txtPassword" /> <br /> <input type="checkbox" id="chbRember" />Rember me <br /> <input type="button" id="btnLogin" value="Login" /> <br /> <br /> <a href="/home.aspx" target="_blank">Home Page</a> </div> </body> </html>