JQuery to Disable Single or Multiple ListItem of a DropDownList in Asp.Net C# VB.Net

Sometimes we need to disable or not clickable or not selectable ListItem of a DropDownList. In many cases we can just filter out those ListItems but in some cases we can not to maintain the information hierarchy. That’s why in this article I will explain How we can disable ListItems of DropDownList using Jquery based on Value and Text.

Related Article:
Javascript to Disable or Make a ListItem Non selectable ASP.Net DropDownList in C# VB.Net

To do the Example follow the below HTML code:

    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem Text="January" Value="1"></asp:ListItem>
        <asp:ListItem Text="February" Value="2"></asp:ListItem>
        <asp:ListItem Text="March" Value="3"></asp:ListItem>
        <asp:ListItem Text="April" Value="4"></asp:ListItem>
        <asp:ListItem Text="May" Value="5"></asp:ListItem>
        <asp:ListItem Text="June" Value="6"></asp:ListItem>
        <asp:ListItem Text="July" Value="7"></asp:ListItem>
        <asp:ListItem Text="August" Value="8"></asp:ListItem>
        <asp:ListItem Text="September" Value="9"></asp:ListItem>
        <asp:ListItem Text="October" Value="10"></asp:ListItem>
        <asp:ListItem Text="November" Value="11"></asp:ListItem>
        <asp:ListItem Text="December" Value="12"></asp:ListItem>
    </asp:DropDownList>

JQuery code to Disable ListItem of a DropDownList based on Value:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#<% =DropDownList1.ClientID %>  option[value=3]").attr("disabled", "disabled");
            $("#<% =DropDownList1.ClientID %>  option[value=4]").attr("disabled", "disabled");
        });  
    </script>

Note: March & April ListItem will be disabled.

JQuery code to Disable ListItem of a DropDownList based on Text:

        <script type="text/javascript">
            $(document).ready(function () {
                $("#<% =DropDownList1.ClientID %>  option[Text=September]").attr("disabled", "disabled");
                $("#<% =DropDownList1.ClientID %>  option[Text=October]").attr("disabled", "disabled");
            });  
    </script>

Note: September & October ListItem will be disabled.

Output/Outcome:
jQuery to Disable Single or Multiple ListItem of a DropDownList in Asp.Net Csharp VB.Net

Hope now you can Disable or Make ASP.Net DropDownList ListItem Non selectable Using jQuery easily.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code