Below is the image of bootstrap step navigation,

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.

Below is the image of bootstrap step navigation,

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 16, 2014 at 8:15 SaumilSaumil 2,51766 gold badges3434 silver badges5454 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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().

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="pleted">
      <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>