Open In App

jQuery Mobile Navbar disabled Option

Last Updated : 24 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 Navbar disabled option to disable the Navbar widget.

Syntax: Initializing the navbar with the specified disabled option.

$( "Selector" ).navbar({ disabled: true });
  • Setting the disabled option:

    $( "Selector" ).navbar( "option", "disabled", true );
  • Getting the disabled option:

    var disabled = $( "Selector" ).navbar( "option", "disabled" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile Navbar disabled option.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Navbar disabled Option</h3>
            <div id="GFG">
                <div data-role="header">
                </div>
                <div role="main" class="ui-content">
                </div>
                <div data-role="footer">
                    <div data-role="navbar">
                        <ul>
                            <li><a href="#" class="ui-btn-active">
                                 GFG
                                </a>
                            </li>
                            <li><a href="#">gfg</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <input type="button" id="Button" 
                   value="Value of the disabled Option">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#GFG").navbar({
                disabled: true
            });
            $("#GFG").navbar("option", "disabled", true);
            $("#Button").on('click', function () {
                var a = $("#GFG").navbar("option", "disabled");
                $("#log").html(a);
            });
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Navbar disabled Option

jQuery Mobile Navbar disabled Option

Reference: https://api.jquerymobile.com/navbar/#option-disabled



Previous Article
Next Article

Similar Reads

jQuery Mobile Navbar iconpos Option
jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. In this article, we are going to learn the jQuery Mobile Navbar iconpos Option. The iconpos option asks for positioning the icon for the Navbar items. Syntax: The iconpos option takes a string inp
2 min read
jQuery Mobile Navbar defaults 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 Navbar defaults option. When the value of this option is set to true that means other widgets options have default values and causes jQuery Mobile's widget auto e
2 min read
jQuery Mobile Navbar classes 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 Navbar classes option to add additional classes to the widget's elements. Syntax: Initializing the navbar with the classes option. $( ".selector" ).navbar({ class
2 min read
jQuery Mobile Navbar initSelector 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 Navbar initSelector option. The value of this option is a selector string that picks elements on the basis of the value of this option and explicates the stated N
2 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
How to create a Disabled Option Select using jQuery Mobile ?
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 creating a Disabled Option Select using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1
1 min read
jQuery Mobile Selectmenu 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 jQuery Mobile Selectmenu Widget disabled option to disable the selectmenu, if the value is set to true. Syntax: $( ".selector" ).selectmenu({ disabled: boolean }); CDN Link: First,
1 min read
jQuery Mobile Button 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 Button Widget disabled option to make the button enable or disabled. It accepts a boolean value. Syntax: $("selector").button({ disabled: true }); CDN Links: Firs
1 min read
jQuery Mobile Popup 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 Popup Widget disabled Option is used to disable the popup option. It accepts the boolean value i.e. true to disable the popup and false to enable the popup box. S
1 min read
jQuery Mobile Textinput 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 Textinput Widget disabled Option to disable the input fields if it set to true. Syntax: $( ".selector" ).textinput({ disabled: boolean }); CDN Link: First, add jQ
1 min read