How to Disable Tab Access using JQuery

By Posted on

This is an article which is written to give an alternative for a simple problem which is how to disable tab access using JQuery. In other words, using a specific snippet code in JQuery so that it can disable access to a specific tab. This scenario sometimes useful and it is needed in the web application based furthermore for an example processing a form which is split into several tabs.

So, in order to make life easier for end-user or for anyone who is using the web-based application, a form with less entry divided into several tabs will save them from panic attack rather than filling only one form containing lots of entry. Even more if that form needs to be scrolled-down further so that the user can fill all the entry field.

Below is the script of HTML describing main page for displaying several tabs : 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing JQuery Disable Tab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
#accountForm {
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#general-information">General Information</a></li>
<li><a href="#additional-information">Additional Information</a></li>
<li><a href="#summary">Summary</a></li>
</ul>
<form id="accountForm" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="general-information">
<div class="form-group">
<label class="col-xs-3 control-label">First Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="firstName" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Last Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="lastName" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5  col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<div class="tab-pane" id="additional-information">
<div class="form-group">
<label class="col-xs-3 control-label">Company</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="company" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Job Title</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="jobtitle" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5  col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('.nav li').not('.active').addClass('disabled');
});
</script>

Below is the preview of the above HTML file :

The JQuery script which is becoming the focus for disabling access the other tab is the following : 

$('.nav li').not('.active').addClass('disabled');

Since the other two tabs, the tab titled ‘Additional Information’ and ‘Summary’ doesn’t have an ‘active’ class, it will be ‘disabled’. That is what the line of JQuery script above translated.

Leave a Reply