Enable Disable all Asp.Net Controls Placed Inside Div on Dropdownlist Selection

Hi friends, in this post we will learn How to Enable Disable all Asp.Net Controls Placed Inside Div on Dropdownlist Selection. Here we are using jQuery to Enable Disable all Asp.Net Controls Placed Inside Div on Dropdownlist Selection. By default all controls on page load is disabled, and when user choose Enable from dropdownlist, then all controls will be enabled.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery to Enable Disable all Asp.Net Controls Placed Inside Div Based on Dropdownlist Selection</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        EnableDisableControls();
    });
    function EnableDisableControls() {
        var selectedValue = $('#<%=disableenable.ClientID %>').val();
            if (selectedValue == 1) {
                $("#controldiv").find("input, select, button, textarea").prop("disabled", false);
            }
            else {
                $("#controldiv").find("input, select, button, textarea").prop("disabled", true);
            }
        }
    </script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-lg-12" style="text-align:center">
<h2>JQuery to Enable Disable all Asp.Net Controls Placed Inside Div Based on Dropdownlist Selection</h2>   
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="form-group">
    <label for="exampleInputEmail1">Make Selection</label>
    <asp:DropDownList runat="server" class="form-control" ID="disableenable" onchange="EnableDisableControls(this)">
<asp:ListItem Text="--Select-" Value="--Select--"></asp:ListItem>
<asp:ListItem Text="Enable" Value="1"></asp:ListItem>
<asp:ListItem Text="Disable" Value="2"></asp:ListItem>
</asp:DropDownList>
  </div>


</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<hr />
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4" id="controldiv">
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <asp:TextBox runat="server" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <asp:TextBox type="password" class="form-control" id="exampleInputPassword1" runat="server" placeholder="Password" />
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <asp:FileUpload runat="server" type="file" id="exampleInputFile" />
  </div>
  <div class="checkbox">
    <label>
      <asp:CheckBox ID="chk" runat="server" type="checkbox" Text="Check me out" />
    </label>
  </div>
  <asp:Button type="submit" class="btn btn-default" runat="server" ID="btnsubmit" Text="Submit"></asp:Button>
</div>
<div class="col-lg-4"></div>

</div>
<div class="row">
<div class="col-lg-12" style="margin-top:30px;text-align:center">
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a>| Back to article:
<a href="http://hightechnology.in/enable-disable-all-asp-net-controls-placed-inside-div-on-dropdownlist-selection/">
Enable Disable all Asp.Net Controls Placed Inside Div Based on Dropdownlist Selection</a> | Hosting partner 
<a href="http://www.grootstech.com" target="_blank">Grootstech</a> 
</div>
</div>
</form>
</body>
</html>