Question

我正在尝试禁用几个下拉菜单，同时取消选中复选框。我现在有下拉填充，但现在我需要相应地启用/禁用它。

复选框

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

THE GRID

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

由于GridView中控件的ID在HTML输出中被修改，因此使用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>

在CheckBoxes的事件处理程序中使用这些类名：

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

在这个jQuery函数调用中，找到了CheckBoxes的hpvCheck类名。在change事件的事件处理程序中：

找到CheckBox的父表行
找到表格行中的DropDownList，其hpvViolation类名称
找到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--");
      }
 }

禁用网格视图中的下拉列表

3 个答案: