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

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

2 个答案: