Menu ▼



Posted By :
avatarmrkraju
Total Views : 805

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>






comments powered by Disqus


Search dotnetlearners.com