Search This Blog

Wednesday 26 June 2019

How to disable non selected options in dropdown list using jQuery?


When you click on the button, except selected item from dropdown list other items disabled.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#Button1").click(function (e) {
                e.preventDefault();
                //This line disable the DropDown
                //$('#DropDownList1').prop('disabled', true);

                //This line disable the unselected item from DropDown List
                $('#DropDownList1 option').each(function () {
                    !this.selected && !$(this).index() == 0 ? $(this).attr('disabled', true) : "";
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>Select</asp:ListItem>
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
                <asp:ListItem>4</asp:ListItem>
            </asp:DropDownList>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>



No comments:

Post a Comment