Question

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

<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>

javascript函数：

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

但是我尝试了很多次而没有得到预期的输出请让我知道解决方案

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

您使用此代码。

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

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

如何在asp.net中通过javascript启用/禁用dropdownlist

3 个答案: