Enable next Bootstrap Wizard step if checkbox is checked

Asked

Viewed 533 times

3

I’m trying to do a check with a Bootstrap Wizard that I am using, I need the steps to be enabled if certain checks are marked, otherwise the next step cannot be enabled.

inserir a descrição da imagem aqui

I have these steps on the form:

<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
    <li class="active" data-target="#step1">
        <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
    </li>
    <li data-target="#step2">
        <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
    </li>
    <li data-target="#step3">
        <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
    </li>
    <li data-target="#step4">
        <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
    </li>
</ul>
<div class="clearfix"></div>

My attempt to make that check is like this:

if($("#CheckTermo1").is(':checked')){   
    if("data-target" == "#tab2"){                   
        $(".next").prop("disabled", true);
    } else {
        $(".next").attr("disabled",false);  
    }
}

I have the CheckTermo1 that marked should enable the step2, the CheckTermo2 will enable the step3and the CheckTermo3 will enable the step4.

The checks are like this:

<input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
<input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
<input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
jquery twitter-bootstrap

  • Where is this class .next?

  • Hello @Sam, this class is on the button: <li class="next"> <a href="javascript:void(0);" class="btn btn-lg txt-color-Darken"> Next </a> </li> But it has nothing to do with my attempt.

  • So in case you want to change which div will have the class class="active" according to the checkbox marked?

  • I’m not sure if that would be it, but when you click on the above navigation would be enabled.

  • But the data-target is as #step2 and not as #tab2. The #tab2 is in href. It has something to do?

  • Try going through the list of li. $( ".form-wizard> li" ).each(function( index ) {&#xA; let target = $(this).data('target')&#xA; if(target == '#tab2'){&#xA; // seu codigo&#xA; }&#xA; }); within the if($("#CheckTermo1").is(':checked')

Show 1 more comment

2 answers

2


You can do so by checking if the checkbox is checked and enabling or disabling the next button. According to the documentation, to disable the button, simply add the class .disabled.

You can use a generic Event Handler instead of creating a if for every thing. Using the method onNext from the plugin, you can use a callback to trigger the event change manually. I put a delay of 100ms in setTimeout because when clicking next, the event is triggered before the active panel change. See:

$(document).ready(function() {
   
   var checks = $(".checkbox[name^=CheckTermo]");
   
  	$('.form-bootstrapWizard').bootstrapWizard({
      onNext: function(){
         setTimeout(function(){
            checks.trigger("change");
         }, 100);
         return verifica();
      },
      onTabClick: function(){
         return verifica();
      }
   });

   function verifica(){
      var tab_ativa = $(".tab-content .active");
      var check = tab_ativa.find(".checkbox[name^=CheckTermo]");

      if( check.is(':checked') ){
         $(".next").removeClass("disabled");
         $(".form-wizard .active").next().removeClass("disabled");
         return true;
      }else{
         $(".next").addClass("disabled");
         $(".form-wizard .active").prev().addClass("disabled");
         return false;
      }
   }
   
   checks.on("change", verifica);
   checks.trigger("change");

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div class="form-bootstrapWizard">

   <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <ul class="bootstrapWizard form-wizard">
                <li class="active" data-target="#tab1">
                    <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
                </li>
                <li data-target="#tab2" class="disabled">
                    <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
                </li>
                <li data-target="#tab3" class="disabled">
                    <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
                </li>
                <li data-target="#tab4" class="disabled">
                    <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
                </li>
            </ul>
</div></div></div>
   <div class="tab-content">
       <div class="tab-pane active" id="tab1">
            1<input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
       </div>
       <div class="tab-pane" id="tab2">
            2<input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
       </div>
      <div class="tab-pane" id="tab3">
            3<input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
       </div>
      <div class="tab-pane" id="tab4">
            salvar
       </div>
      <ul class="pager wizard">
         <li class="next"> <a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Próximo </a> </li>
      </ul>
   </div>
</div>

  • Hello @Sam, thanks for the tips, but I’m having a problem now, the top navigation is with a blue box and the navigation was a bit messy, but the code itself worked cool.

  • https://i.stack.Imgur.com/6vdS4.png

  • Strange rs.. you moved something in HTML or CSS?

  • Hello @Sam, man, I didn’t touch anything, but I did some tests, I was taking the JS code you gave me and the form is with the correct layout.

2

I made an example using the Pills of bootstrap.

How are you using links, the effect of disabled which is applied to buttons. To achieve this, I set the links without the attribute href and added as inputs were checked.

Below is the result:

let $termo1 = $('#termo1'),
    $termo2 = $('#termo2');
    
$('input[type="checkbox"]').click(function(){
    if($termo1.is(':checked')) $('#nav-termo2').attr("href","#termo2Conteudo");
    
    else  $('#nav-termo2').removeAttr("href");
    
    if($termo2.is(':checked')) $('#nav-termo3').attr("href","#termo3Conteudo");
    
    else  $('#nav-termo3').removeAttr("href");
});
a:not([href]):hover {
    border-color: transparent !important;  
    cursor: no-drop;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-termo1" data-toggle="tab" href="#termo1Conteudo" role="tab" aria-controls="nav-home" aria-selected="true">Termo 1</a>
    <a class="nav-item nav-link" id="nav-termo2" data-toggle="tab"  role="tab" aria-controls="nav-profile" aria-selected="false">Termo 2</a>
    <a class="nav-item nav-link" id="nav-termo3" data-toggle="tab"  role="tab" aria-controls="nav-contact" aria-selected="false">Termo 3</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="termo1Conteudo" role="tabpanel" aria-labelledby="nav-home-tab">Termo 1 <br> <br>
     <input id="termo1"  type="checkbox" /> <label>Aceito os termos do serviço </label>
  </div>
  <div class="tab-pane fade" id="termo2Conteudo" role="tabpanel" aria-labelledby="nav-profile-tab">Termo 2 <br><br>
  <input id="termo2" type="checkbox" /> <label>Aceito os termos do serviço </label>
  </div>
  <div class="tab-pane fade" id="termo3Conteudo" role="tabpanel" aria-labelledby="nav-contact-tab">Termo 3</div>
</div>

I added the CSS to zero the edge of elements that do not have the href and change mouse cursor to give a "disabled effect".

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.