sp9 sp9 - 5 months ago 109
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">
<ul>
<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>
</ul>
</div>
</div>
</div>

<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>
</ul>
</div>


Thanks

Answer

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"){
        $(".next").attr("disabled","disabled");
    }
    else if(target == "#tab1"){
        $(".previous").attr("disabled","disabled");
    }

});

$(".wizard").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});
Comments