Open In App

How to disable a jQuery UI menu?

Last Updated : 22 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article we will disable a jQuery UI menu

Syntax:

$(".selector").menu( "disable" );

Learn more about selectors and menu options in jQuery.

Approach:

  • First, add jQuery UI scripts needed for your project.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”> <script src = “https://code.jquery.com/jquery-1.10.2.js”></script> <script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href=
              rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.10.2.js">
      </script>
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
      </script>
 
        <style>
            .ui-menu {
                width: 200px;
            }
        </style>
 
        <script>
            $(function () {
                $("#gfg").menu();
                $("#gfg").menu("disable");
            });
        </script>
    </head>
 
    <body>
        <h1>jQuery UI | disable menu</h1>
        <ul id="gfg">
            <li><a href="https://www.geeksforgeeks.org/">1st</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">2nd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">3rd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">2nd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">5th</a>
          </li>
        </ul>
    </body>
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads