How to disable tabs using jQuery

Hello friends, in this article we will see how to disable tabs using jQuery.

How to disable tabs using jQuery

First, let us create a tabs structure using html and jQuery as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">India</a></li>
    <li><a href="#tabs-2">United States</a></li>
    <li><a href="#tabs-3">China</a></li>
  </ul>
  <div id="tabs-1">
    <p>India, also known as the Republic of India, is a country in South Asia. It is the seventh largest country by area and with more than 1.3 billion people, it is the second most populous country as well as the most populous democracy in the world.</p>
  </div>
  <div id="tabs-2">
    <p>The U.S. is a country of 50 states covering a vast swath of North America, with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York, a global finance and culture center, and capital Washington, DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast, Los Angeles' Hollywood is famed for film making.</p>
  </div>
  <div id="tabs-3">
    <p>China is a populous nation in East Asia whose vast landscape encompasses grassland, desert, mountains, lakes, rivers and more than 14,000km of coastline. Capital Beijing mixes modern architecture with historic sites such as the Forbidden City palace complex and Tiananmen Square. Shanghai is a skyscraper-studded global financial center. The iconic Great Wall of China runs east-west across the country's north.</p>
  </div>
</div>
 
 
</body>
</html>

Now to disable second and third tab, we just need to modify a single line of .tabs() function in the above code as follows:

$( "#tabs" ).tabs( { disabled: [1, 2] } );

In the above line, we used the position of tabs to be disabled. (index starts with 0). This will result in the the disabled tabs as below:

disable tabs using jQuery
disabled tabs using jQuery

I hope you liked this article. If you have any queries, please use below comments section for the same. Please like our Facebook page and subscribe to our newsletter for future updates. Have a nice day! tada…