jquery - 使用 jQuery 启用/禁用 Gridview itemTemplate 控件

Question

这是我在 asp.net 中的[checkbox]代码[dropdownlist]......

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

我的问题是：如何仅在选中复选框时启用下拉菜单？如果未选中该复选框，则禁用下拉菜单

<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

不完全确定，但我认为您可以使用JQuery .change()或.click( )到check-box.

$('.selectme').change(function() {  
  var ddl = $(this).siblings("input[type='select']");

  if ($('this').is(':checked'))
  {
       $('ddl').attr('disabled', false);
  }
  else
  {
       $('ddl').attr('disabled', true);
  }
});

Answer 2

我会在RowDataBound活动中这样做。

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

该toggleSelectList函数看起来像这样：

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