c# - disable dropdownlist on page load - Stack Overflow

I have 2 dropdownlists populated from database: what I want is to disable the second one on page load and when the value of the first one =="1".

here is my second dropdownlist:

<asp:DropDownList ID="DropDownList2" runat="server"  AutoPostBack="True"
                  DataSourceID="SqlDataSource2" DataTextField="BName" DataValueField="BId"  
                  OnDataBound="DownList2_DataBound" 
                  OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>

This what I tried to disable the dropdownlist2 (javascript):

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('DropDownList2').disabled = true;
    }
</script>

Tried another thing in C# code:

protected void Page_Load(object sender, EventArgs e)
{
    if (DropDownList1.SelectedValue.ToString() == "1")
    { 
        DropDownList2.Enabled = false;
    }
}

I even tried this alone in page_load:

DropDownList2.Enabled = false;

The problem is it's disabled on SelectedIndexChanged for dropdownlist1 but not on page load! Is there's something missing in my code?

I have 2 dropdownlists populated from database: what I want is to disable the second one on page load and when the value of the first one =="1".

here is my second dropdownlist:

<asp:DropDownList ID="DropDownList2" runat="server"  AutoPostBack="True"
                  DataSourceID="SqlDataSource2" DataTextField="BName" DataValueField="BId"  
                  OnDataBound="DownList2_DataBound" 
                  OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>

This what I tried to disable the dropdownlist2 (javascript):

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('DropDownList2').disabled = true;
    }
</script>

Tried another thing in C# code:

protected void Page_Load(object sender, EventArgs e)
{
    if (DropDownList1.SelectedValue.ToString() == "1")
    { 
        DropDownList2.Enabled = false;
    }
}

I even tried this alone in page_load:

DropDownList2.Enabled = false;

The problem is it's disabled on SelectedIndexChanged for dropdownlist1 but not on page load! Is there's something missing in my code?

• c#
• javascript
• asp

Share Improve this question Follow edited Jan 2, 2014 at 15:41 Abbas 14.4k66 gold badges4242 silver badges7575 bronze badges asked Jan 2, 2014 at 15:34 SamSam 43211 gold badge1111 silver badges2525 bronze badges 1

• @rene I don't see a problem with (thanks)! but thank you for letting me know the site rules :) – Sam Commented Jan 2, 2014 at 15:46

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

This statement allow you to set the dropdown2 to disable at page load.

$('#' + '<%=DropDownList2.ClientID%>').attr('disabled',true);

you can do this using Jquery simply as follow:

 $(document).ready(function () {

      var isPostBack = '<%=IsPostBack%>';
        if (isPostBack == 'False' || $('#' + '<%=DropDownList1.ClientID%>').val() == '1') {
          //This statement allow you to set the dropdown2 to disable 
          $('#' + '<%=DropDownList2.ClientID%>').attr('disabled', true);
      }
      else {
          $('#' + '<%=DropDownList2.ClientID%>').attr('disabled', false);
      }
      $('#' + '<%=DropDownList1.ClientID%>').on("change", function () {
          //Your code here
          if ($('#' + '<%=DropDownList1.ClientID%>').val() == '1') {
                $('#' + '<%=DropDownList2.ClientID%>').attr('disabled', true);
           }
           else {
               $('#' + '<%=DropDownList2.ClientID%>').attr('disabled', false);
           }
        });
  });

It is likely that the DropDownList1.SelectedValue is not equal to "1" on Page Load as I guess you'd be DataBinding it somehow, which would take effect afterwards.

Try adding a SelectedIndexChanged function for DropDownList1 and dis/enabling DropDownList2 here. You can put Enabled="False" in the markup for DropDownList2 to ensure it starts off Disabled.

The issue is likely that document.getElementById('DropDownList2') doesn't find your dropdown list. The ID for the list is a server-side value that doesn't necessarily translate to the client-side ID. If you set ClientIDMode for the control to Static, then the client ID will be DropDownList2. Another option is to access the ClientID property of the control when outputting your JavaScript (if it's inline):

document.getElementById('<%=DropDownList2.ClientID%>').disabled = true;

All that being said, even if that's the case, it'd be better to just start with Enabled="False" as @aaroncatlin suggests so you don't have to wait for the JavaScript to execute before it is disabled.

in ASP.NET the generated ID differs from the asp ID on the ponent, to access the element from Javascript you need to use <%=DropDownList2.ClientID%> the corresponding javascript will be something like this :

document.getElementById(<%=DropDownList2.ClientID%>).disabled = true;

The DropDownList would have a default selected index of -1 and a null value for selected value. I usually check against the selected index, instead of by value. For example,

if(DropDownList1.SelectedIndex < 1){
    // assuming that index 0 holds your value of "1"
    DropDownList2.Enabled = false;
}

And @Jacob did rightly point out about you needing to get the proper ClientID for your JavaScript function.