如何在IE8上使用jQuery添加/删除类？

Question

正如您在代码段上所见，以下代码在所有浏览器上均能正常运行，但是在IE8上，当我单击复选框时，始终禁用按钮（链接）supprimer，仅当我单击另一个选择按钮时才启用所有。

您知道如何解决此问题吗？ 先感谢您。

 function suppressionMultiple() { var nbrChecked = function() { var aptitudesASupprimer = jQuery('#Aptitudes :checked').length; var aptitudesPresentes = jQuery('#Aptitudes input:checkbox').length; if (aptitudesASupprimer == 0) jQuery('#supprimer').removeAttr('href').removeClass("actifBtn").addClass("desactifBtn"); else jQuery('#supprimer').attr('href','#').removeClass("desactifBtn").addClass("actifBtn"); }; nbrChecked(); jQuery( "#desactifBtn input[type=checkbox]" ).on( "change", nbrChecked); }; function selectionner() { jQuery('#Aptitudes input[type=checkbox]').prop('checked', true ); jQuery('#supprimer').attr('href', '#').removeClass("desactifBtn").addClass("actifBtn"); }; 

 #selectionner { float: left; } #supprimer { float: right; } .categorieAptitudes label { display: block; padding-left: 2px; } #SupAptitudes { margin-top: 0px; margin-bottom: 5px; padding-bottom: 10px; } a.actifBtn { -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: solid thin #929292; text-shadow: none; background: #F6F6F6; background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD); color: buttontext; text-decoration: none; padding: 3px 8px; } a.actifBtn:hover { background-image: -webkit-linear-gradient(top, #DDDDDD, #F6F6F6); background-image: -moz-linear-gradient(top, #DDDDDD, #F6F6F6); background-image: -ms-linear-gradient(top, #DDDDDD, #F6F6F6); background-image: -o-linear-gradient(top, #DDDDDD, #F6F6F6, #DDDDDD); background-image: linear-gradient(to bottom, #DDDDDD, #F6F6F6); } a.desactifBtn { -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: solid thin #929292; text-shadow: none; background: #F6F6F6; background-image: -webkit-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -moz-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -ms-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: -o-linear-gradient(top, #F6F6F6, #DDDDDD); background-image: linear-gradient(to bottom, #F6F6F6, #DDDDDD); color: grey; text-decoration: none; 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"> <a class="actifBtn" id="selectionner" onclick="selectionner();">Séléctionner tout</a> <a class="desactifBtn" id="supprimer">Supprimer</a> </div> 

Answer 1

我认为与更改事件有关的问题是IE7 / 8。 请参阅仅在重复选择后才触发IE8和IE7 onchange事件

更改为onclick而不是每个输入

        <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();       
    };

尝试这个

Answer 2

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

您可以在此使用本机javascript。