JQuery to Enable and Disable Textbox when CheckBox is Checked with Gridview

Hi all,

try this example to use JQuery to Enable and Disable Textbox when CheckBox is Checked with Gridview

1) Open VS2008 and create a new website and add new page and from Toolbox drag Gridview in web page so our page will be like this :-

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
 <Columns>
 <asp:TemplateField HeaderText="Ministry">
 <ItemTemplate>
 <asp:CheckBox ID="CheckBox" runat="server" />
 </ItemTemplate>
 </asp:TemplateField>
 <asp:TemplateField HeaderText="Ministry">
 <ItemTemplate>
 <asp:Label ID="Ministry" runat="server" Text='<%#Eval("Ministry")%>' />
 </ItemTemplate>
 </asp:TemplateField>
 <asp:TemplateField HeaderText="Title">
 <ItemTemplate>
 <asp:Label ID="Title" runat="server" Text='<%#Eval("Title")%>' />
 </ItemTemplate>
 </asp:TemplateField>
 <asp:TemplateField HeaderText="Criteria">
 <ItemTemplate>
 <asp:TextBox ID="Criteria" runat="server" Text='<%#Eval("Criteria")%>' />
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 </asp:GridView>

2) Now we need to Bind Grivdview control so in code behind add the following code :-

protected void Page_Load(object sender, EventArgs e)
 {
 string s = Guid.NewGuid().ToString().ToLower();
 var obj = new { Ministry = "Ministry 0", Title = "Title 0", Criteria = "Criteria 0" };
 var objList = (new[] { obj }).ToList();
 objList.Add(new { Ministry = "Minis try 1", Title = "Title 1", Criteria = "Criteria 1" });
 objList.Add(new { Ministry = "Mi nis try sfd 2", Title = "Title 2", Criteria = "Criteria 2" });
 objList.Add(new { Ministry = "Minis try fdsf sdf 3", Title = "Title 3", Criteria = "Criteria 3" });
 objList.Add(new { Ministry = "Mini stryd dd 4", Title = "Title 4", Criteria = "Criteria 4" });
 objList.Add(new { Ministry = "Min is tryf 5", Title = "Title 5", Criteria = "Criteria 5" });
 objList.Add(new { Ministry = "Mini stry 6", Title = "Title 6", Criteria = "Criteria 6" });
 GridView1.DataSource = objList;
 GridView1.DataBind();
 }

3) Now We need to add Jquery function which will enable and disable Textbox in Gridview according to Checkbox state

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("input[type=text][id*=Criteria]").attr("disabled", true);
 $("input[type=checkbox][id*=CheckBox]").click(function() {
 if (this.checked)
 $(this).closest("tr").find("input[type=text][id*=Criteria]").attr("disabled", false);
 else
 $(this).closest("tr").find("input[type=text][id*=Criteria]").attr("disabled", true);
 });
 });

 </script>

Hope this helps

Good Luck