jQuery Tabs with Next / Previous button

Question

I am trying to accomplish JQuery tabs with Next and back buttons. I am attaching a visual of what I am trying to do.

like in the mock up, the proceed button should be active in the first tab but when you get to tab-2 the button should be disabled by default and active when btn-1 and btn-2 are clicked and stay active throughout user session.

Note that all other tabs are pulling content from other pages with the exception of tab-1 which is a static page.

I have already tried this stackoverflow solution but didn't work. Links/button disabled until another button is clicked

Below is the html mark-up.

<div class="tabContainer">
  <div class="tabContent" id="tab1">
    <h3>Tab Content 1</h3>
     <p>
      Cu iudico rationibus eum, ne duo elit nostrum constituam. Mea ea atqui minim. Eros primis persius eu sed. Usu cu aperiri utroque. 
      An per voluptua phaedrum percipitur, ne ius scribentur dissentiunt. Lobortis principes est te, inermis placerat hendrerit mea ne, duo dicat nonumy sententiae an. 
      An mel eius noster, dolore vituperata efficiendi pro at. Electram incorrupte mea at, percipit torquatos instructior sed eu, unum dolores ne vel. 
      Id has tacimates intellegam, putent recusabo corrumpit nam ea.
    </p>
    <button class="next"  onclick="">Proceed to Next Step</button>
   </div>
  <div class="tabContent" id="tab2">
    <button class="completed"  onclick="">update</button>
    <button class="next"  onclick="">Proceed to Next Step</button>
  </div>
  <div class="tabContent" id="tab3">
   <button class="next"  onclick="">Proceed to Next Step</button>
  </div>
  <div class="tabContent" id="tab4">
      <button class="next"  onclick="">Proceed to Next Step</button>
  </div>
 </div>

Answer 1

I am assuming that the user clicks on tab1, tab2 too, and that proceed to next button would remain active only when button1 and button2, both are clicked.

Well, add an event to tab2, that would disable the proceed to next button.

And remove that event from tab2 once both button1 and button2 are clicked, and set disable to false.

Answer 2

I'm not sure to good understanding what you mean but this is my suggest:

$(document).ready(function(){
   $('.next').attr('disabled', 'disabled');
 });

 $('#btn1, #btn2').click(function(){
    $(this).siblings('.next').removeAttr('disabled');
 });

  $('.tabContent').click(function(){
      $('.next').attr('disabled', 'disabled');// to disable new added next buttons
  });

Answer 3

As per my understanding you want to enable proceed to next button if button1 and button 2 both are clicked.

For that you just need to add a status to clicked button using data api() and then on click event check for both button status if they are true enable proceed to next button.

Try this.

 $(function(){ $("#btn1,#btn2").click(function(){ $(this).data("clicked","1"); var btn1Clicked = $("#btn1").data("clicked"); var btn2Clicked = $("#btn2").data("clicked"); if(btn1Clicked && btn2Clicked) { $("#btn3").prop("disabled",false); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn1" type="button">Burron 1</button> <button id="btn2" type="button"> Button 2</button> <button id="btn3" type="button" disabled> Go to next button</button> 

I hope it will help you.