<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>