Open In App

jQuery UI Tabs disabled Option

Last Updated : 08 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use disabled option in jQuery UI slider.
The
disabled option is used to disable the tabs in jQuery UI.

Syntax:

$( ".selector" ).tabs(
   { disabled : true }
);

Parameters:

  • boolean: If it set to true it will disable all the panels.
  • array: An array containing the zero-based indexes of the tabs

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=
    </script>
      
    <script src=
    </script>
  
    <script>
        $(function () {
            $("#gfg").tabs({
                disabled : true
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI tabs disabled option</h3>
  
    <div id="gfg">
        <ul>
            <li><a href="#gfg1">Tab 1</a></li>
            <li><a href="#gfg2">Tab 2</a></li>
            <li><a href="#gfg3">Tab 3</a></li>
        </ul>
  
        <div id="gfg1">
            <p>tab Number -1</p>
        </div>
  
        <div id="gfg2">
            <p>tab Number -2</p>
        </div>
  
        <div id="gfg3">
            <p>tab Number -3</p>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
  
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script>
        $(function () {
            $("#gfg").tabs({
                disabled: [0, 1]
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI tabs disabled option</h3>
  
    <div id="gfg">
        <ul>
            <li><a href="#gfg1">Tab 1</a></li>
            <li><a href="#gfg2">Tab 2</a></li>
            <li><a href="#gfg3">Tab 3</a></li>
        </ul>
  
        <div id="gfg1">
            <p>tab Number -1</p>
        </div>
  
        <div id="gfg2">
            <p>tab Number -2</p>
        </div>
  
        <div id="gfg3">
            <p>tab Number -3</p>
        </div>
    </div>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

jQuery UI Tabs collapsible Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use collapsible option in jQuery UI slider
2 min read
jQuery UI Tabs event Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use event option in jQuery UI slider. The
2 min read
jQuery UI Tabs option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article, we will see how to use the option method in jQuery UI slider
2 min read
jQuery UI Tabs heightStyle Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use heightStyle option in jQuery UI slider.
2 min read
jQuery UI Tabs active Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see how to use active option in jQuery UI slider. The
2 min read
jQuery UI tabs show Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI tabs show option is used to display the panel animation. It accepts different types of values i.e. Boolean or Number or String or Object. Syntax: $( ".selector" ).tabs({
1 min read
jQuery UI tabs hide Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI tabs hide option is used to display the animation effect to hide the tab content. It accepts the different type of value i.e. Boolean or Number or String or Object. Synt
1 min read
jQuery UI tabs classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI tabs classes option is used to add the additional classes to the element. Syntax: $( ".selector" ).tabs({ classes: { "ui-tabs": "highlight" } }); CDN Link: First, add jQ
1 min read
jQuery Mobile Rangeslider Widget disabled Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Rangeslider Widget disabled option to disable the rangeslider if its value is set to true. It accepts a boolean value and its default value is false. Syntax: $( "
1 min read
jQuery UI Button disabled Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button disabled option is used to disable the button element if it set to true. Syntax: $( ".selector" ).button({ disabled: true }); CDN Link: First, add jQuery UI scrip
1 min read