In this article I will explain how to enable disable TextBox in GridView when CheckBox is selected (checked) in ASP.Net using jQuery.
The article also features Header CheckBox which will allow users to enable disable TextBoxes in all rows when the Header CheckBox is selected (checked).
HTML Markup
Following is the HTML markup of the GridView which consist of 3 TemplateField columns. The TextBoxes are disabled by default and will be enabled only when the corresponding CheckBox is checked.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkHeader" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<% # Eval("Name") %>' Enabled="false"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country">
<ItemTemplate>
<asp:TextBox ID="txtCity" runat="server" Text='<% # Eval("Country") %>' Enabled="false"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces
C#
VB.Net
Binding the GridView
The GridView is populated using some dummy records using DataTable.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
jQuery implementation to enable disable TextBox when CheckBox is selected (checked)
The jQuery implementation has to be done in two parts by attaching OnClick event handlers to the Header CheckBox and for the CheckBox inside each GridView Row.
Header CheckBox
The click event handler for the Header CheckBox makes sure that when the Header row CheckBox is checked, all the CheckBoxes in the GridView rows are checked and their corresponding TextBoxes are enabled. And reverse of this will happen when the Header row CheckBox is unchecked.
Row CheckBox
The click event handler for row CheckBox makes sure that when a CheckBox of a particular GridView row is checked, then only the TextBoxes inside its parent row will be enabled and vice versa.
Another thing it does is that it verifies that if all the CheckBoxes in GridView row are checked then it checks the Header row CheckBox and if even one CheckBox is unchecked then the Header row CheckBox is unchecked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Enable Disable all TextBoxes when Header Row CheckBox is checked.
$("[id*=chkHeader]").bind("click", function () {
var chkHeader = $(this);
//Find and reference the GridView.
var grid = $(this).closest("table");
//Loop through the CheckBoxes in each Row.
$("td", grid).find("input[type=checkbox]").each(function () {
//If Header CheckBox is checked.
//Then check all CheckBoxes and enable the TextBoxes.
if (chkHeader.is(":checked")) {
$(this).attr("checked", "checked");
var td = $("td", $(this).closest("tr"));
td.css({ "background-color": "#D8EBF2" });
$("input[type=text]", td).removeAttr("disabled");
} else {
$(this).removeAttr("checked");
var td = $("td", $(this).closest("tr"));
td.css({ "background-color": "#FFF" });
$("input[type=text]", td).attr("disabled", "disabled");
}
});
});
//Enable Disable TextBoxes in a Row when the Row CheckBox is checked.
$("[id*=chkRow]").bind("click", function () {
//Find and reference the GridView.
var grid = $(this).closest("table");
//Find and reference the Header CheckBox.
var chkHeader = $("[id*=chkHeader]", grid);
//If the CheckBox is Checked then enable the TextBoxes in thr Row.
if (!$(this).is(":checked")) {
var td = $("td", $(this).closest("tr"));
td.css({ "background-color": "#FFF" });
$("input[type=text]", td).attr("disabled", "disabled");
} else {
var td = $("td", $(this).closest("tr"));
td.css({ "background-color": "#D8EBF2" });
$("input[type=text]", td).removeAttr("disabled");
}
//Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
chkHeader.attr("checked", "checked");
} else {
chkHeader.removeAttr("checked");
}
});
});
</script>
![Enable disable TextBox in GridView when checkbox is selected (checked) in ASP.Net]()
Demo
Downloads
