Disable and Enable a Div and input elements inside the div
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <title>Hiding a div and its Element using jquery</title> <body> <div id="my_div"> <div> <label>Textbox:</label><input type="text" id="name" name="name"> </div> <div> <label>Radio Button:</label><input type="radio" id="radiobutton" name="radiobutton"> </div> <div> <label>Checkbox:</label><input type="checkbox" id="chkbutton" name="chkbutton"> </div> <div> <label>Textarea:</label><textarea name="address" id="address"></textarea> </div> <div> <label>Dropdown:</label> <select name="country" id="country"> <option value="india">India</option> <option value="china">China</option> <option value="srilanka">Srilanka</option> </select> </div> <div> </div> </div> <a href="#" Onclick="disablediv();">Disable</a> <a href="#" Onclick="enablediv();">Enable</a> </body> <script type="text/javascript"> function disablediv() { $("#my_div").find("input,textarea,select").removeAttr("enabled", "enabled"); $("#my_div").find("input,textarea,select").attr("disabled", "disabled"); } function enablediv() { $("#my_div").find("input,textarea,select").removeAttr("disabled", "disabled"); $("#my_div").find("input,textarea,select").attr("enabled", "enabled"); } $(document).ready(function() { $("#my_div").find("input,textarea,select").attr("disabled", "disabled"); }); </script> </head> </html> |