lundi 11 mars 2019

jquery for disabling multiple checkboxes on selection of other checkbox

I have a HTML code where I have 7 boxes in a div.Below is the html code.

<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="true">
          <div class="panel-body">
            <div class="col-md-6 col-sm-6 col-xs-12 ">            
              <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
                                                                                        <label>Certification</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
              <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" />
                                                                                        <label>Functional</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeLCM" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
                                                                                        <label>LCM</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypePerformance" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
                                                                                        <label>Performance</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeResilience" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
                                                                                        <label>Resilience</label>
            </div>            
             <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px"  />
                                                                                        <label>Security</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 ">
               <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone[]" style="width:15px;height:15px;margin-right:20px" />
                                                                                        <label>System verification</label>
            </div> 

1)Now if i select the checkbox "Certification" then all other should be automatically disabled.

2)If System Verification is checked (all the other automatically on checked and grey out)(Certification on No and grey out)

3)if other options are individually selected then (Certification and System Verification on No and grey out)

please let me know how i can get the functionality

Below is the code which i tried.

$("input[type='checkbox']").click(function(){
                   var val = $(this).attr('value');
                   switch(val) {
                     case 'Certification':
                     if($(this).is(':checked'))
                       $("input[value='Functional'], input[value='LCM'],input[value='Performance'],input[value='Resilience'],input[value='Security'],input[value='System verification']").prop('disabled',true);
                     else
                       $("input[value='Functional'], input[value='LCM'],input[value='Performance'],input[value='Resilience'],input[value='Security'],input[value='System verification']").prop('disabled',false);
                   break;
                   case 'System verification':
                     if($(this).is(':checked'))
                         {
                         $("input[value='Functional'], input[value='LCM'],input[value='Performance'],input[value='Resilience'],input[value='Security']").prop('checked',true);
                         $("input[value='Certification']").prop('disabled',true);
                         }
                     else
                         $("input[value='Functional'], input[value='LCM'],input[value='Performance'],input[value='Resilience'],input[value='Security'],input[value='Certification']").prop('disabled',false);
                   break;
                  
                   }
               });



Aucun commentaire:

Enregistrer un commentaire