Validation checkbox

Bonjour tous le monde, je viens vers vous, car je suis bloqué, je m'explique:
j'ai téléchargé Twitter Bootstrap Wizard qui permet de changer de contenu dynamiquement. Il est possible par exemple de mettre une condition comme le faite de remplir un input texte avant de passer à l'étape suivante.

exemple:
à l'étape 2, obligation de remplir le input texte.
http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-formvalidation.html#


j'ai repris ce même code pour ne garder que 3 étapes et j'ai également mis une checkbox à l'étape 1.
Je souhaite que l'internaute soit obligé de cocher la checkbox pour passer à l'étape 2.

Vous trouverez ci-dessous mon code modifié, mais qui ne fonctionne pas.
Le code d'origine est disponible ici: http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-formvalidation.html#

<div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
    <ul>
        <li><a href="#tab1" data-toggle="tab">First</a></li>
        <li><a href="#tab2" data-toggle="tab">Second</a></li>
        <li><a href="#tab3" data-toggle="tab">Third</a></li>
    </ul>
     </div>
      </div>
    </div>
    <div id="bar" class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
            <input id="checkBox" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
        </div>
        <div class="tab-pane" id="tab2">
            <p>
                <input type='select' name='name' id='name' placeholder='Enter Your Name'>
              </p> 
        </div>
        <div class="tab-pane" id="tab3">
        </div>
         
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="finish"><a href="http://www.google.fr">Finish</a></li>
        </ul>
    </div>
</div>

$(document).ready(function() {
****$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
************if(index==1) {
****************// Make sure we entered the name
****************if(!$('input[#checkBox]').is(':checked') ) {
********************alert('You must checked first');
********************return false;
****************}
************}
*
************if(index==2) {
****************// Make sure we entered the name
****************if(!$('#name').val()) {
********************alert('You must enter your name');
********************$('#name').focus();
********************return false;
****************}
************}
*
************// Set the name for the next tab
************$('#tab3').html('Hello, ' + $('#name').val());
*
*************
*
********}, onTabShow: function(tab, navigation, index) {
************var $total = navigation.find('li').length;
************var $current = index+1;
************var $percent = ($current/$total) * 100;
************$('#rootwizard .progress-bar').css({width:$percent+'%'});
********}});
});

Modifié par luangue (28 Sep 2015 - 08:42)

Bonjour,
Il est écrit dans ton code

if(!$('input').is(':checked') ) {

$('input') concerne tous les inputs de la page ... ce qui t'intéresse, c'est ton checkbox.
Ce devrait plutôt être

if(!$('#checkBox').is(':checked') ) {

yessss, super ça marche.

Je te remercie beaucoup.