Enable next Bootstrap Wizard step if checkbox is checked

Question

Enable next Bootstrap Wizard step if checkbox is checked

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I'm trying to do a check with a Bootstrap Wizard that I'm using, I need the steps to be enabled if certain checks are checked, otherwise the next step can not be enabled.

Ihavethesestepsintheform:

<divclass="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 do this is as follows:

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 step2 , CheckTermo2 will enable step3 and CheckTermo3 will enable step4 .

The checks are as follows:

<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

asked by anonymous 13.12.2018 / 19:18

2 answers

2

I made an example using the bootstrap Pills .

As you are using links , to perform navigation, you can not apply the disabled effect that is applied to the buttons. To get this effect, I defined the links without the href attribute and added them 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 CSS to zero the border of elements that do not have href and change the mouse cursor to give a "disabled" effect.

13.12.2018 / 21:01

How to perform an action when replying to an email What is the difference between getRating () and getProgress ()?

score 2 · Accepted Answer

You can do this by checking that 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 each thing. Using the onNext method of the plugin, you can use a callback to trigger the change event manually. I put a delay of 100ms in the setTimeout because clicking on 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><linkrel="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><scriptsrc="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>