sp9 sp9 - 1 year ago 287
jQuery Question

Disable next navigation link in bootstrap wizard

I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.

<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<li><a href="#tab1" data-toggle="tab">Item Search</a></li>
<li><a href="#tab2" data-toggle="tab">Item Details</a></li>
<li><a href="#tab3" data-toggle="tab">Add SPR</a></li>

<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display: none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>


Answer Source

the below code should work.

Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      var target = $(e.target).attr("href");

    $(".wizard a").removeAttr("disabled");

    if(target == "#tab3"){
    else if(target == "#tab1"){


$(".wizard").on("click", function(event){
    if ($(this).is("[disabled]")) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download