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

Question

正如您在 sn-p 代码中看到的那样，以下代码在所有浏览器上都能完美运行，但在 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 event is triggered only after repeated selection

将每个输入改为 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。