'how to enable/disable dropdownlist by javascript in asp.net

I have simple code that is a dropdown list and Two buttons (named enable and disable)i want to enable and disable the dropdown list by javascript function and after button click asp.net HTML code:

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

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

     }
}

but i tried this many times and not getting the expected output please let me known the solution

asp.net

Solution 1:^[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>

you use this code.

Solution 2:^[2]

Try the below, add return keyword before function call and return false in function to prevent the server postback Which made the dropdown enabled

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

Solution 3:^[3]

The obvious solution is ClientIDMode="Static" and return false; in javascript

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Manish Singh
Solution 2
Solution 3	syed mhamudul hasan akash

'how to enable/disable dropdownlist by javascript in asp.net

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]