如何在asp.net中通过javascript启用/禁用下拉列表答案

【问题标题】：how to enable/disable dropdownlist by javascript in asp.net如何在asp.net中通过javascript启用/禁用下拉列表
【发布时间】：2022-04-01 15:04:20
【问题描述】：

我有一个简单的代码，它是一个下拉列表和两个按钮（名为启用和禁用）我想通过 javascript 函数启用和禁用下拉列表，然后单击按钮 asp.net HTML 代码：

    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
    </asp:DropDownList>

    <asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
    <asp:Button ID="Button2" runat="server" OnClientClick="return disable2();" Text="disable" />

javascript函数：

function enable() {

            document.getElementById("DropDownList1").disabled = false;
            document.getElementById("DropDownList2").disabled = false;
            return;
        }

      function disable() {

     document.getElementById("DropDownList1").disabled = true;
     document.getElementById("DropDownList2").disabled = true;

      }

and pageloadlogic:public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

     }
}

但我尝试了很多次，但没有得到预期的输出，请告诉我解决方案

【问题讨论】：

你确定元素的ID吗？编译页面时可以更改它们。要查看它们，请查看浏览器中页面的源代码。

标签： asp.net

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script>
function disable() {
    document.getElementById("mySelect").disabled=true;
}
function enable() {
    document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>

</body>
</html>

您使用此代码。

【讨论】：

【解决方案2】：

试试下面的方法，在函数调用前添加return关键字，并在函数中返回false，以防止服务器回发从而启用下拉菜单

      <head runat="server">
  <title></title>
  <script type="text/javascript">
    function enable() {
      document.getElementById("DropDownList1").disabled = false;
      document.getElementById("DropDownList2").disabled = false;
      return false;
    }

    function disable() {
      document.getElementById("DropDownList1").disabled = true;
      document.getElementById("DropDownList2").disabled = true;
      return false;
    }
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList>
      <br />
      <asp:DropDownList ID="DropDownList2" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList>

      <asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
      <asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
    </div>
  </form>
</body>

</html>

【讨论】：

【解决方案3】：

显而易见的解决方案是 javascript 中的 ClientIDMode="Static" 和 return false;

<div>
        <asp:DropDownList ID="DropDownList1" runat="server" ClientIDMode="Static">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:DropDownList ID="DropDownList2" runat="server" ClientIDMode="Static">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>5</asp:ListItem>
    </asp:DropDownList>

    <asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
    <asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
    </div>
    <script>
        function enable() {

            document.getElementById("DropDownList1").disabled = false;
            document.getElementById("DropDownList2").disabled = false;
            return false;
        }

        function disable() {

            document.getElementById("DropDownList1").disabled = true;
            document.getElementById("DropDownList2").disabled = true;
            return false;
        }

    </script>

【讨论】：

谢谢...我得到了预期的输出
你总是可以通过在我的问题旁边打勾来接受这个答案作为正确答案来表示感谢 :)
显而易见的解决方案是 ClientIDMode="Static" -- 并不总是很明显。并不总是最好的解决方案。我有几个使用 3rd 方控件的应用程序，并且使用静态 ClientID 会破坏控件。