Disable next navigation link in bootstrap wizard

Question

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

I added an ID to the a tag and used this $("#nextNav").attr("disabled", "disabled"); but it still able to navigate. — sp9, Jun 21 '16 at 21:09

score 2 · Answer 1 · answered Jun 21 '16 at 21:10

Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')

without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.

You can also apply some CSS to make the button LOOK disabled as well.

var nextOK = true;
$('#mybutt').click(function(){
  $('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
  nextOK = false;
});
$('#nextA').click(function(e){
    if (nextOK) window.location.href = 'http://google.com';
    else alert('Button disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<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 id="nextA" href="#">Next</a>
      </li>
    </ul>
  </div>
  
  <button id='mybutt'>Disable Next Button</button>

score 2 · Accepted Answer · answered Jun 21 '16 at 21:11

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 a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

score 0 · Answer 3 · answered Jun 21 '16 at 21:15

With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.

You can achieve that by adding a simple document.ready function.

You can then add your condition in the function direcly, or any other code manipulating the HTML.

And lastly, by adding an id to the element you want to use, it would make your life much more easier.

Here is a sample of what it could look like:

document.ready = function() {
    //Your condition
    if(42 >= 1){
        //Select the element and make it point to a void
        $('#nextLink').attr('href', 'javascript:void(0)');
    }
}

Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).

Disable next navigation link in bootstrap wizard

3 Answers3