Monday, 23 May 2016

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

5/23/2016 - By Pranav Singh 0

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

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

<form id="form1" runat="server">
        CheckBox Id<div id="msgData"></div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                            <asp:CheckBox ID="CheckBox1" runat="server" onclick="javascript:ManageButtonControl(this);" />
                    <asp:BoundField DataField="CountryName" HeaderText="Country Name" />
                    <asp:BoundField DataField="Population" HeaderText="Population" />
                    <asp:BoundField DataField="Code" HeaderText="Code" />
                            <asp:Button ID="Button1" runat="server" Text="Click Me" />

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;
        private DataTable GetCountryData()
            DataTable dt = new DataTable();

            DataRow dataRow1 = dt.NewRow();
            dataRow1["CountryName"] = "India";
            dataRow1["Population"] = "125 Cr";
            dataRow1["Code"] = "IN";

            DataRow dataRow2 = dt.NewRow();
            dataRow2["CountryName"] = "Pakistan";
            dataRow2["Population"] = "50 Cr";
            dataRow2["Code"] = "PK";

            DataRow dataRow3 = dt.NewRow();
            dataRow3["CountryName"] = "United States";
            dataRow3["Population"] = "25 Cr";
            dataRow3["Code"] = "US";

            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.

<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
        <th scope="col">&nbsp;</th>
        <th scope="col">Country Name</th>
        <th scope="col">Population</th>
        <th scope="col">Code</th>
        <th scope="col">&nbsp;</th>
            <input id="GridView1_CheckBox1_0" type="checkbox" name="GridView1$ctl02$CheckBox1" onclick="javascript: ManageButtonControl(this);" />
        <td>125 Cr</td>
            <input type="submit" name="GridView1$ctl02$Button1" value="Click Me" id="GridView1_Button1_0" />
            <input id="GridView1_CheckBox1_1" type="checkbox" name="GridView1$ctl03$CheckBox1" onclick="javascript: ManageButtonControl(this);" />
        <td>50 Cr</td>
            <input type="submit" name="GridView1$ctl03$Button1" value="Click Me" id="GridView1_Button1_1" />
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:

  <script src="//"></script>
        function ManageButtonControl(val) {
            //Get the checkbox Id
            var checkboxId =;
            //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) {
                $("#" + buttonControlId).prop('disabled', true);
            } else {
                $("#" + buttonControlId).prop('disabled', false);


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.

 Now checkbox or uncheck checkbox to enable disable the butrton of gridview.

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post


Please let me know your view

Free Ebooks

About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

Email Id :

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at


Top jQuery Plugins

Global Classified :
© 2014
back to top