Enable Or Disable GridView Button By Row CheckBox Using jQuery In Asp.Net

This article will show you how you can enable or disable gridview button by row checkbox using javascript/jquery in asp.net. In this I have shown for making button of row by row checkbox.

Some of my previous articles are as follows: Browse, Read and Populate or Show or Bind CSV File Data In GridView Using C#.Net in Asp.net, Bind Class Property to GeidView Using C#.net In Asp.net, Gridview Auto Generate Row Number In Asp.Net Using C#.Net, Bind TextBox Control Inside TemplateField Of GridView Using C#.Net In Asp.Net, Short GridView Data From Header Using C#.Net In Asp.Net, Export GridView Or Table Data Into PDF By C#.Net In Asp.Net Using jQuery, Reading XML Document in C# Using Linq and Bind To GridView In Asp.Net, Nested GridView Using c#.Net In Asp.Net, Read XML File in Dataset And Bind To GridView In Asp.Net Using C#.Net.

So for this article first we will create a new asp.net application and add the below code.

CheckBox Id<div id="msgData"></div>

<div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

<asp:TemplateField>

<asp:CheckBox ID="CheckBox1" runat="server" onclick="javascript:ManageButtonControl(this);" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="CountryName" HeaderText="Country Name" />

<asp:BoundField DataField="Population" HeaderText="Population" />

<asp:BoundField DataField="Code" HeaderText="Code" />

<asp:TemplateField>

<asp:Button ID="Button1" runat="server" Text="Click Me" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

Now here is the code to bind the grid view.

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication7

{

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

DataTable dt = new DataTable();

dt = GetCountryData();

GridView1.DataSource = dt;

GridView1.DataBind();

}

private DataTable GetCountryData()

{

DataTable dt = new DataTable();

dt.Clear();

dt.Columns.Add("CountryName");

dt.Columns.Add("Population");

dt.Columns.Add("Code");

DataRow dataRow1 = dt.NewRow();

dataRow1["CountryName"] = "India";

dataRow1["Population"] = "125 Cr";

dataRow1["Code"] = "IN";

dt.Rows.Add(dataRow1);

DataRow dataRow2 = dt.NewRow();

dataRow2["CountryName"] = "Pakistan";

dataRow2["Population"] = "50 Cr";

dataRow2["Code"] = "PK";

dt.Rows.Add(dataRow2);

DataRow dataRow3 = dt.NewRow();

dataRow3["CountryName"] = "United States";

dataRow3["Population"] = "25 Cr";

dataRow3["Code"] = "US";

dt.Rows.Add(dataRow3);

return dt;

}

After binding the gridview we will write our jQuery code. But before that we will check our page view source. Please check the bellow code of page source. This is the most important part of this article. Without understanding this we will not be able to understand the other articles.

<tr>

<th scope="col">Country Name</th>

<th scope="col">Population</th>

</tr>

<tr>

<td>

<input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript: ManageButtonControl(this);" />

</td>

<td>India</td>

<td>

<input type="submit" name="GridView1$ctl02$Button1" value="Click Me" id="GridView1_Button1_0" />

</td>

</tr>

<tr>

<td>

<input id="GridView1_CheckBox1_1" type="checkbox" name="GridView1$ctl03$CheckBox1" onclick="javascript: ManageButtonControl(this);" />

</td>

<td>Pakistan</td>

<td>

<input type="submit" name="GridView1$ctl03$Button1" value="Click Me" id="GridView1_Button1_1" />

</td>

</tr>

</table>

Note: Here I am showing html code of only two record of gridview.

Now check the highlighted part of the code. In this check the Id. In this you will find a pattern repetition of the Id of the checkbox and button control. Now we will apply a trick for this Id to get the row control button control.

Now check the jQuery code:

function ManageButtonControl(val) {

//Get the checkbox Id

var checkboxId = val.id;

//Checkbox id will be as shown format"GridView1_CheckBox1_1" This may change. For your page

var splitCheckboxId = checkboxId.split('_');

//Get the button control id from view source of the page.

var buttonControlId = "GridView1_Button1_" + splitCheckboxId[2];

var status = $("#" + checkboxId).prop("checked");

if (status == true) {

//Disable

$("#" + buttonControlId).prop('disabled', true);

} else {

//Enable

$("#" + buttonControlId).prop('disabled', false);

}

</script>

In above code first I have identified the checkbox id and after finding the id of checkbox i have split the id with “_”, and taken the last index. This may be different in your case. After that I have prepared the id for the gridview button control. Make sure that you are preparing your button id as per the pattern visible in your page view source.

After preparing the id’s get the current checkbox status and as per the row no enable disable the button control inside the gridview.

Now we have done run the application to check the output.