Question

here is my code in asp.net… when it renders the code i have a [checkbox] with [dropdownlist] by default all the dropdownlist disabled when the page loads by doing like this:

var $ddls = $('select');
$ddls.prop("disabled", true); 

my question is: how to enabled the dropdown only when the checkbox is checked? and if the checkbox is unchecked then disabled the dropdown

<asp:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False" 

    <Columns>          
         <asp:TemplateField HeaderText="Reason">
        <ItemTemplate> 
            <div class="selectreason">
                <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> 
    </asp:TemplateField>

    </Columns>
</asp:GridView>

Answer 1

I would do this in the RowDataBound event.

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);
        }
    }
}

The toggleSelectList function would look something like this:

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