Comment ajouter/supprimer une classe en utilisant jQuery sur IE8?

Question

Le code suivant fonctionne parfaitement sur tous les navigateurs comme vous pouvez le voir sur le code snippet, mais sur IE8, le bouton (link) supprimer est toujours désactivé lorsque je clique sur les cases à cocher, il n'est activé que lorsque je clique sur l'autre bouton qui sélectionne tout.

Avez-vous une idée de la façon de résoudre ce problème? Merci d'avance.

function suppressionMultiple() { 
 
\t var nbrChecked = function() { 
 
\t \t var aptitudesASupprimer = jQuery('#Aptitudes :checked').length; 
 
\t \t var aptitudesPresentes = jQuery('#Aptitudes input:checkbox').length; 
 
\t \t if (aptitudesASupprimer == 0) 
 
\t \t \t jQuery('#supprimer').removeAttr('href').removeClass("actifBtn").addClass("desactifBtn"); 
 
\t \t else 
 
\t \t \t jQuery('#supprimer').attr('href','#').removeClass("desactifBtn").addClass("actifBtn"); 
 
\t }; 
 

 
\t nbrChecked(); 
 
\t jQuery("#desactifBtn input[type=checkbox]").on("change", nbrChecked); 
 
}; 
 

 
function selectionner() { 
 
\t jQuery('#Aptitudes input[type=checkbox]').prop('checked', true); 
 
\t jQuery('#supprimer').attr('href', '#').removeClass("desactifBtn").addClass("actifBtn"); 
 
};

#selectionner { 
 
\t float: left; 
 
} 
 

 
#supprimer { 
 
\t float: right; 
 
} 
 

 
.categorieAptitudes label { 
 
\t display: block; 
 
\t padding-left: 2px; 
 
} 
 

 
#SupAptitudes { 
 
\t margin-top: 0px; 
 
\t margin-bottom: 5px; 
 
\t padding-bottom: 10px; 
 
} 
 

 
a.actifBtn { 
 
\t -webkit-border-radius: 1px; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: solid thin #929292; 
 
\t text-shadow: none; 
 
\t background: #F6F6F6; 
 
\t background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD); 
 
\t color: buttontext; 
 
\t text-decoration: none; 
 
\t padding: 3px 8px; 
 
    \t 
 
} 
 

 
a.actifBtn:hover { 
 
\t background-image: -webkit-linear-gradient(top, #DDDDDD, #F6F6F6); 
 
\t background-image: -moz-linear-gradient(top, #DDDDDD, #F6F6F6); 
 
\t background-image: -ms-linear-gradient(top, #DDDDDD, #F6F6F6); 
 
\t background-image: -o-linear-gradient(top, #DDDDDD, #F6F6F6, #DDDDDD); 
 
\t background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6); 
 
} 
 

 
a.desactifBtn { 
 
\t -webkit-border-radius: 1px; 
 
\t -moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t border: solid thin #929292; 
 
\t text-shadow: none; 
 
\t background: #F6F6F6; 
 
\t background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD); 
 
\t background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD); 
 
\t color: grey; 
 
\t text-decoration: none; 
 
\t padding: 3px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div id="Aptitudes" onchange="suppressionMultiple();"> 
 
    <div class="group"> 
 
    <div class="nomCategorie"> Réinsertion - suivi</div> 
 
    <div class="categorieAptitudes" id="Réinsertion - suivi"> 
 
     <label> 
 
     <input type="checkbox" value="1251"><span class="item-search">Appartement pour mise en situation d'autonomie</span> 
 
     </label> 
 
     <label> 
 
     <input type="checkbox" value="1282"><span class="item-search">Education du patient et de son entourage à domicile</span> 
 
     </label> 
 
     <label> 
 
     <input type="checkbox" value="1293"><span class="item-search">Equipe mobile, suivi à domicile</span> 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="SupAptitudes"> 
 
\t <a class="actifBtn" id="selectionner" onclick="selectionner();">Séléctionner tout</a> 
 
\t <a class="desactifBtn" id="supprimer">Supprimer</a> 
 
</div>

Answer 1

var sup = document.querySelectorAll('#supprimer'); 
sup.className -= "classToKeep" 
sup.className += " actifBtn " 

Vous pouvez utiliser javascript natif sur ce point.

Answer 2

Je pense qu'il s'agit du problème avec l'événement de changement est IE7/8. S'il vous plaît voir IE8 & IE7 onchange event is triggered only after repeated selection

changement d'être onclick place pour chaque entrée

 <input type="checkbox" class="mCheck" value="1251"><span class="item-search">Appartement pour mise en situation d'autonomie</span> 

     $(document).on('ready', function(){ 
     $(".mCheck").on("click", function(){ 
      suppressionMultiple(); 
     }); 
    }); 
    function suppressionMultiple() { 
     var nbrChecked = function() { 
      var aptitudesASupprimer = $('.mCheck').is(':checked'); 
      alert(aptitudesASupprimer); 
      if (!aptitudesASupprimer){ 
       $('#supprimer').removeAttr('href').removeClass("actifBtn").addClass("desactifBtn"); 
      } 
      else{ 
       $('#supprimer').attr('href','#').removeClass("desactifBtn").addClass("actifBtn"); 
      } 
     }; 
     nbrChecked();  
    }; 

essayer cette