如何在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。