jQuery Mobile panel disable Option

Last Updated : 16 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Panels are widgets used to create columns, drawers, collapsible menus, etc. They are very flexible widgets and can be used for multiple purposes.

In this article, we are going to learn the jQuery Mobile Panel disabled option. The disabled option disables or enables the panel.

Syntax: The disable option takes a boolean value and the syntax is as follows. If true, we can disable the panel and vice-versa.

$("#gfgpanel").panel({

   disabled: false

});

Get the disabled option.

var disabled = $( ".selector" ).panel( "option", "disabled" );

Set the disabled option

$( ".selector" ).panel( "option", "disabled", false );

CDN Links: Use the following CDN Link for jQuery Mobile projects.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we have two panels, one panel has the disabled set to false and another panel set to true.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div data-role="page"> 
        <div data-role="header"> 
            <h1 style="color:green;">GeeksforGeeks</h1> 
        </div> 
        <div data-role="main" class="ui-content"> 
            <h4>jQuery Mobile Panel disabled Option</h4> 
            <a href="#gfgpanel1" data-role="button"> 
            Open Panel 1</a> 
            <a href="#gfgpanel2" data-role="button"> 
            Open Panel 2</a> 
        </div> 
        <div data-role="panel" id="gfgpanel1"> 
            <div class="panel-content"></div> 
            <h2>Welcome to GeeksforGeeks</h2> 
            <p>Panel disabled option is false</p> 
  
  
            <a href="#" data-rel="close" data-role="button"> 
            Close panel 
            </a> 
        </div> 
        <div data-role="panel" id="gfgpanel2" data-position="right"> 
            <div class="panel-content"></div> 
            <h2>Welcome to GeeksforGeeks</h2> 
            <p>Panel disabled option is true</p> 
  
  
            <a href="#" data-rel="close" data-role="button"> 
            Close panel 
            </a> 
        </div> 
    </div> 
    <script> 
        $(document).ready(function() { 
            $("#gfgpanel1").panel({ 
                disabled: false 
            }); 
            $("#gfgpanel2").panel({ 
                disabled: true 
            }); 
        }); 
    </script> 
</body> 
</html> 