Faraz Shah Khan

MCP, MCAD.Net, MCSD.Net, MCTS-Win, MCTS-Web, MCPD-Web

Javascript Enable/Disable Dropdown in Gridview using Checkboxes

If you come up with some requirement in which you have a Checkbox and a DropDownList in GridView control and you are requried to enable disable the DropDownList on the basis of the CheckBox value you can use following Code.


-----------------------------------.aspx file ----------------------------------

<script type="text/javascript">
        function StatusGridDropdown(drpdown)
        {
            document.getElementById(drpdown).disabled = !document.getElementById(drpdown).disabled;
        }
</script>
.
.
.
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Width="400px">
        <Columns>
            <asp:TemplateField>
                <AlternatingItemTemplate>
                    <asp:CheckBox ID="cbStatus" runat="server" />
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="cbStatus" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <AlternatingItemTemplate>
                    <asp:DropDownList ID="ddl" runat="server" Enabled="False" Width="169px">
                    </asp:DropDownList>
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <asp:DropDownList ID="ddl" runat="server" Width="169px" Enabled="False">
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
</asp:GridView>


----------------------------------.vb file if VB.Net is the language ------------------------------------

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("ddl"), DropDownList).ClientID & "')")
        End If
End Sub


----------------------------------.cs file if C#.Net is the language ------------------------------------

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if ((e.Row.RowType == DataControlRowType.DataRow)) {
        ((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:StatusGridDropdown('" + ((DropDownList)e.Row.FindControl("ddl")).ClientID + "')");
    }
}

Posted: Feb 27 2008, 10:59 AM by farazsk11 | with 31 comment(s) |
Filed under: , , , , , , ,

Comments

pho said:

small suggestion:

if you use the asp.net ajax framework you can use $get(drpdown) instead of document.getelementbyid

# February 27, 2008 9:04 AM

sultani.khalid.af said:

Thanks Alot Faraz ,

I am new to javascript and asp.net how can we change this one if we have one more textbox and want to disable the dropdown and checkbox in single checkbox click.

thanks.

try to add something like this only work for textbox.

    If (e.Row.RowType = DataControlRowType.DataRow) Then

           DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("ddl"), DropDownList).ClientID & "')")

           DirectCast(e.Row.FindControl("cbStatus"), CheckBox).Attributes.Add("onclick", "javascript:StatusGridDropdown('" & DirectCast(e.Row.FindControl("TextBox1"), TextBox).ClientID & "')")

       End If

# May 7, 2008 11:57 PM

sultani.khalid.af said:

what i mean single checkbox click to handle enable or disable two controls inside the gridview.

# May 8, 2008 12:05 AM

rajendra said:

greate help me thanks for it

# June 4, 2008 11:25 PM

vamshi said:

how can we use the same in formview?

# June 30, 2008 10:07 AM

vamshi said:

i have one checkbox and two dropdownlists .If checkbox checked both should be disabled.

one dropdownlist is like

states

and other cities in that particular state

# June 30, 2008 10:28 AM

helper said:

// For vamshi

// This is a clientside JavaScript

// DropDownStates is the id of the states drop-down

// You must attach an event handler to handle

// onClick and fire onCheckBoxClick, or set

// AutoPostback to true

function onCheckBoxClick()

{

drpdwnStates = document.getElementById('<%=DropDownStates.ClientID%>');

drpdwnCities = document.getElementById('<%=DropDownCities.ClientID%>');

drpdwnStates.disabled = !drpdwnStates.disabled;

drpdwnCities.disabled = !drpdwnCities.disabled;

}

# July 4, 2008 2:39 AM

farazsk11 said:

well sultani.khalid.af you don't have to write the onclick method twice, what you can do is add one more parameter like this

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)

{

   if ((e.Row.RowType == DataControlRowType.DataRow)) {

       ((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:StatusGridDropdown('" + ((DropDownList)e.Row.FindControl("ddl")).ClientID + "', '" + ((TextBox)e.Row.FindControl("TextBox1")).ClientID + "')");

   }

}

and you can modify javascript like

<script type="text/javascript">

       function StatusGridDropdown(drpdown,txtbox)

       {

           document.getElementById(drpdown).disabled = !document.getElementById(drpdown).disabled;

           document.getElementById(txtbox).disabled = !document.getElementById(txtbox).disabled;

       }

</script>

sorry for late reply i was out and was not checking my blog.

# July 25, 2008 9:06 AM

Deepak Ray said:

Thanks it helped me to solve the query

# July 31, 2008 1:32 AM

Skye said:

Will this work to disable a button if a checkbox is checked?  Do I just replace the dropdownlist name with the button name instead?

What I am trying to do is prevent users from deleting a row in the gridview if it is locked (via the checkbox control).  

# September 19, 2008 7:27 AM

farazsk11 said:

@Skye

Well yes it should work, just try to replace the dropdown with Button and make sure that while passing the ClientID cast the control with Button type instead of DropDownList type.

# September 19, 2008 3:31 PM

helder said:

I've a problem, if the textbox are enabled=false that solution d'ont work. the solution only work if the textbox is enabled = true.

i d'ont no the solution. any help?

# October 7, 2008 11:46 AM

Anurodh said:

Thanks it helped me to solve the problem

# November 4, 2008 9:24 AM

Eknath said:

Ekdam Zhakassss!!!!!!!!!!!

It helped me a lot.

Thanks a lot!

# November 21, 2008 6:55 AM

M.Saqib Nasim said:

Greate Simple piece of code...........

# February 11, 2009 5:57 AM

HMcoder said:

How can I adjust this so that if a checkbox within the gridview is checked it disables a button that is  on the webform and not within the gridview?

# February 24, 2009 11:01 AM

farazsk11 said:

@HMcoder:

Well if you want to disable a button outside the gridview its not a problem. you can use this code

((CheckBox)e.Row.FindControl("cbStatus")).Attributes.Add("onclick", "javascript:StatusGridDropdown('" + this.Button1.ClientID + "')");

# February 25, 2009 3:19 AM

... said:

Interessante Informationen.

# March 6, 2009 2:54 AM

divya said:

Nice Article

it helped me LOT

# March 25, 2009 6:34 AM

Pallavi said:

Great help for me and a very cool code thanks a tone

# November 6, 2009 5:16 AM

Karthik said:

Many many thanks. I also tried by using getElementsByTagName which did not work. I had used the name (given in id field of asp) of the control.

# January 19, 2010 12:14 PM

Karthik said:

Also i have a case where i need to disable two drop downs and one date control (custom control using js). I have disabled the drop downs but in case of the date control the only way to disable it is by setting its ReadOnly property to true. How will i be able to access this property in javascript? This being one problem the other is to reset the value selected (if any) in the drop down to the initial value (on uncheck). Pls tell me if you know the answers to any of these.

# January 19, 2010 12:22 PM

satya said:

Good help for me and so many thanks for u people

# June 10, 2010 8:08 AM

Mitesh said:

guys help me

i want to enable and disable file upload control(used for pic upload). when the drop down list index changes(from 0 to 10 ), that many numbar of file control shpuld be enabled..

0--means no file upload control

1--means 1 file upload control

.

.

.

10-means 10 file upload control

# July 29, 2010 2:23 PM

Athar ali khan said:

re: Javascript Enable/Disable Text box using Dropdown

# February 24, 2011 3:14 AM

MOHD ASIF ISMAIL said:

Hello

In my asp.net page .

i have taken two DropDownList within Gridview.

i want to disable second dropdownlist on selected index of first dropdownlist.

please help and give javascript code to do it.

# May 25, 2011 7:26 AM

Zahid said:

Thanks dear Greate Simple piece of code.

# July 13, 2011 3:47 AM

dharam said:

thanks a lot very useful.

# October 12, 2011 9:10 AM

Balu said:

I'm using a gridview inwhich every row contains checkbox and textbox when ever i click the check box of a particular row corresponding text box should be enabled.

# November 9, 2011 12:28 AM

Afzal said:

awesome code..thanks a lot my fried..:)

# January 1, 2012 11:43 PM

Jack said:

how i disabled dropdownbox in javascript

# February 8, 2012 3:12 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)