如何通过javascript在www.example.com中启用/禁用下拉列表asp.net

kpbwa7wx  于 2022-12-01  发布在  .NET
关注(0)|答案(3)|浏览(114)

我有一个简单的代码,这是一个下拉列表和两个按钮(名为启用和禁用)我想启用和禁用下拉列表的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)
    {

     }
}

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

uoifb46i

uoifb46i1#

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

您可以使用以下代码。

jaql4c8m

jaql4c8m2#

请尝试以下方法,在函数调用前添加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>
ie3xauqp

ie3xauqp3#

显而易见的解决方案是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>

相关问题