2016-09-19 90 views
1

我有一個簡單的代碼是一個下拉列表和兩個按鈕(命名爲啓用和禁用)我想通過javascript函數啓用和禁用下拉列表,並在按鈕點擊後 asp.net的HTML代碼:如何啓用/禁用在asp.net中的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" /> 

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

    } 
} 

,但我試過很多次,並沒有得到預期的輸出,請讓我知道的解決方案

+0

你確定要素的ID嗎?編譯頁面時可以更改它們。要看到他們在瀏覽器中查看頁面的來源。 – gobes

回答

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

您使用此代碼。

0

試試下面的,之前的函數調用添加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> 
0

顯而易見的解決方案是在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> 
+0

謝謝...我有預期的輸出 –

+0

你可以總是說謝謝接受這個答案是正確的,旁邊的問號旁邊的勾號:) –

相關問題