在网格视图中禁用下拉菜单

Question

我试图在未选中复选框时禁用几个下拉菜单。我现在有下拉菜单填充，但现在我需要相应地 enable/disable 它。

复选框

<asp:TemplateField HeaderText="HPV">
   <ItemTemplate>
      <asp:CheckBox ID="HpvCheck" runat="server" value="feedback"/>
   </ItemTemplate>

下拉列表

<asp:TemplateField HeaderText="HPV Criteria">
   <ItemTemplate>
      <asp:DropDownList   DataTextField="Description" DataValueField="aqdcode" ID="ddlHPvViolation"  runat="server" DataSource="<%# HpvViolation() %>"/>
      </asp:DropDownList>
   </ItemTemplate>
 </asp:TemplateField>

网格

protected void gvViolationsCited_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Header)
    {
        //GridViewFunctions.FindCellByDataField(e.Row, "LOVRID").Visible = false;
        TableCell idCell = GridViewFunctions.FindCellByDataField(e.Row, "ID");
        idCell.Visible = false;

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ImageButton lb = (ImageButton)e.Row.FindControl("lbShowModalDialog");
            long id = long.Parse(idCell.Text);

DDL 填充

public IList<LookupItem> HpvViolation()
{
    return LookupDataLoaderService.Instance.LoadLookupData(LookupTables.HPV_VIOLATION_CODE);
}

Answer 1

对于 Javascript 使用以下逻辑

$("#checkbox1").change(function () {

  if (document.getElementById("checkbox1").checked == true) {

     document.getElementById("DropDown1").disabled = true;
  }
  else {

     document.getElementById("DropDown1").disabled = false;
  }

});

Answer 2

使用jQuery

由于在 HTML 输出中修改了 GridView 中的控件 ID，因此使用 class 属性更容易（尤其是使用 jQuery 选择器）。可以设置输入元素的CssClass属性：

<asp:TemplateField HeaderText="HPV">
    <ItemTemplate>
        <asp:CheckBox CssClass="hpvCheck" ID="HpvCheck" runat="server" ... />
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="HPV Criteria">
    <ItemTemplate>
        <asp:DropDownList CssClass="hpvViolation" ID="ddlHPvViolation" runat="server" Enabled="false" ... />
    </ItemTemplate>
</asp:TemplateField>

并在复选框的事件处理程序中使用这些 class 名称：

$('.hpvCheck').change(function () {
    $(this).closest('tr').find('.hpvViolation')[0].disabled = !$(this).find('input')[0].checked;
});

在此 jQuery 函数调用中，找到了具有 hpvCheck class 名称的复选框。在 change 事件的事件处理程序中：

已找到 CheckBox 的父 table 行
找到 table 行中的 DropDownList 及其 hpvViolation class 名称
找到 ASP.NET CheckBox 控件的 HTML 输入元素
DropDownList的disabled属性是根据CheckBox

checked

使用纯Javascript

如果jQuery不可用，同样可以用纯Javascript来完成。

必须设置 CheckBox onclick事件的处理程序：

<asp:TemplateField HeaderText="HPV">
    <ItemTemplate>
        <asp:CheckBox ID="HpvCheck" runat="server" onclick="processHpvCheck(this);"  ... />
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="HPV Criteria">
    <ItemTemplate>
        <asp:DropDownList CssClass="hpvViolation" ID="ddlHPvViolation" runat="server" Enabled="false" ... />
    </ItemTemplate>
</asp:TemplateField>

并在Javascript代码中定义如下：

function processHpvCheck(chk) {
    // Find the table row that contains the CheckBox
    var container = chk;
    while (container.tagName != 'TR') {
        container = container.parentNode;
    }
    // Find the DropDownList
    var ddl = container.getElementsByClassName('hpvViolation')[0];
    // Enable/disable the DropDownList according to the CheckBox state
    ddl.disabled = !chk.checked;
}

Answer 3

 protected void grdTaskDataCat1_RowDataBound(object sender, GridViewRowEventArgs e) {
     if (e.Row.RowType == DataControlRowType.DataRow) {
         ddlTaskStatus.DataTextField = obj_ds.Tables[0].Columns["STATUS_DESC"].ToString();
                  ddlTaskStatus.DataValueField = obj_ds.Tables[0].Columns["ID"].ToString();
                  ddlTaskStatus.DataSource = obj_ds.Tables[0];
                  ddlTaskStatus.DataBind();
                  ddlTaskStatus.Items.Insert(0, "--Select--");
      }
 }

在网格视图中禁用下拉菜单

Disable Dropdown inside Grid View

asp.net

datagridview

dropdownlistfor