CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Saumil
Saumil

Reputation: 2517

How to disable the step navigation in bootstrap?

Below is the image of bootstrap step navigation,

enter image description here

Now I have a 'next' button(not visible in this picture) at the bottom of the page, on pressing the 'next' button I go from 'step-1 basic information' to 'step-2 restaurant categories'. But the problem is that when I click '2' or '3' in from the navigation I could go to the respected steps. I want to disable this feature because I only want the user to press 'next' button to go from one step to other. Can anyone help me on what to do to disable the navigation from the navigation bar? Thanks in advance.

Upvotes: 2

Views: 10890

Answers (2)

S.A
S.A

Reputation: 201

When you create the step navigation you could just disable this part:

<li class="disabled">
   <a href="#">
      <span class="circle">5</i></span><br>
      <span class="label">Restaurant Categories</span>
   </a>
</li>

So the total step navigation would look sth like that:

<div class="row">
 <div class="col-md-12">
  <ul class="stepper stepper-horizontal">
    <li class="completed">
      <a href="#">
        <span class="circle">1</span><br>
        <span class="label">Basic information</span>
      </a>
    </li>
    <li class="active">
      <a href="#">
        <span class="circle">2</span><br>
        <span class="label">Restaurant Categories</span>
      </a>
    </li>
    <li class="disabled">
      <a href="#">
        <span class="circle">3</i></span><br>
        <span class="label">Restaurant Timings</span>
      </a>
    </li>
  </ul>
 </div>
</div>

Upvotes: 0

Saumil
Saumil

Reputation: 2517

Just got the solution,

Include the following script in the file,

  <script>
        $(document).ready(function() {
                  $('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
                        alert('on tab click disabled');
                        return false;
                }});        
</script>

You can remove the alert().

Upvotes: 3

Related Questions