vendredi 29 avril 2016

Toggle class for CheckBoxes plus validations

I have a LOT of checkboxes, 95. They all have hte same class and are named as an array. I need to change the class from bg-primary to bg-success or some other color. I also need to be able to say at the end, 'You missed this checkbox'. this is where I am at now

   <h3 class = "col-lg-12 text-center bg-warning "><a href="#">STEP 5 - Under the hood</a></h3>
    <div id= "acc4">
   <form>
     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="78">Check oil condition and level
     </fieldset> 

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="79">Check coolant condition and level
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="80">Check trans fluid condition and level
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="81">Check power steering fluid condition and level
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="82">Check brake fluid condition and level
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="83">Fill washer fluid resevoir
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="84">Battery hold down
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="85">Check battery &amp; charging system
     </fieldset>

     <fieldset class="form-horizontal form-group bg-primary">   
        <input type="checkbox" class="box " name="checkBox[]" id="86">Inspeect belts
     </fieldset>

and the Jquery I am using unsuccessfully is

$('input[type=checkbox]').on('change', function () {
    $(this).toggleClass('form-horizontal form-group bg-warning',    this.checked);
});




Aucun commentaire:

Enregistrer un commentaire