Gridview itemTemplate enable/disable the dropdownlist based on the checkbox checked using jQuery


 <ItemTemplate> 
            <div>
                <asp:CheckBox CssClass=”selectme” ID=”chkReject” runat=”server” Checked=”false”>
                </asp:CheckBox>
                <asp:DropDownList runat=”server” ID=”detail” >
                    <asp:ListItem Selected=”True” Value=”0″>Select me</asp:ListItem>
                    <asp:ListItem Value=”1″>one</asp:ListItem>
                    <asp:ListItem Value=”2″>two</asp:ListItem>
                    <asp:ListItem Value=”3″>three</asp:ListItem>
                    <asp:ListItem Value=”4″>four</asp:ListItem>
                </asp:DropDownList>
            </div>
        </ItemTemplate>

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    var chk = e.Row.FindControl(“CheckBox1”) as CheckBox;
    if (chk != null)
    {
        var ddl = e.Row.FindControl(“DropDownList1”) as DropDownList;
        if (ddl != null)
        {
            //assign the JavaScript function to execute when the checkbox is clicked               
            //pass in the checkbox element and the client id of the select
            chk.Attributes[“onclick”] = string.Format(“toggleSelectList(this, ‘{0}’);”, ddl.ClientID);
        }
    }
}

//jQuery:

toggleSelectList = function(el, selectID){
    var selectElement = document.getElementById(selectID);
    if (selectElement){
        selectElement.disabled = !el.checked;
    }
}

2 thoughts on “Gridview itemTemplate enable/disable the dropdownlist based on the checkbox checked using jQuery

  1. thank for ur help if dropdown calculation for grid plz give me

  2. Thanks for this, just to add though (And this is less effeicint), my checkboxes have event handlers on them, so I have replaced the .attr calls with a filter and click functions. Works for me :)(function($) { $.fn.enableCheckboxRangeSelection = function() { var lastCheckbox = null; var $spec = this; $spec.bind(“click”, function(e) { if (lastCheckbox != null && e.shiftKey) { $spec.slice( Math.min($spec.index(lastCheckbox), $spec.index(e.target)), Math.max($spec.index(lastCheckbox), $spec.index(e.target)) + 1 ).filter(e.target.checked ? “:not(:checked)” : “:checked”).click(); } }); return $spec; };})(jQuery);

Leave a Reply

Your email address will not be published. Required fields are marked *

*