复选框浏览器兼容问题解决方案-优快云博客

本文介绍了如何在不同浏览器版本下实现复选框被选中时，提交按钮状态的变化，包括按钮颜色和可用性的调整。通过JavaScript判断复选框的选中状态，并根据不同条件调整按钮的禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=red][b]需求，会员注册，勾选统一注册协议复选框，按钮变亮可用，
不勾选时变灰不可用,以下是解决方案及原理：[/b][/color]



ie7 及以下版本 --> alert(typeof($("#agree").attr("checked")));返回的是boolean类型

ie8 --> alert(typeof($("#agree").attr("checked"))); 如果没有勾选,提示undefined
       勾选之后提示 string

ie9 或者以上版本 --> alert(typeof($("#agree").attr("checked"))); 均返回string类型
        alert($("#agree").attr("checked"));勾选时返回 checked

[color=blue][b][i]agree 复选框ID
toubiao_submit 按钮ID[/i][/b][/color]


function agree_change(){
		//IE8 或以上版本浏览器
		if(typeof($("#agree").attr("checked"))=="undefined" || typeof($("#agree").attr("checked"))=="string"){
			if(typeof($("#agree").attr("checked"))=="undefined")
			{
				$("#agree").attr("checked","checked");
				$("#toubiao_submit").attr("disabled",false);
		  		$("#toubiao_submit").removeClass("toubiao_btn_disable");
		  		$("#toubiao_submit").addClass("toubiao_btn_able");
			}else{
				if($("#agree").attr("checked")=="checked"){
					$("#agree").removeAttr("checked");
					$("#toubiao_submit").attr("disabled",true);
		  			$("#toubiao_submit").removeClass("toubiao_btn_able");
		  			$("#toubiao_submit").addClass("toubiao_btn_disable");
				}else{
					$("#agree").attr("checked","checked");
					$("#toubiao_submit").attr("disabled",false);
			  		$("#toubiao_submit").removeClass("toubiao_btn_disable");
			  		$("#toubiao_submit").addClass("toubiao_btn_able");
				}
			}
			return;
		}
		//IE7 或以下版本浏览器
		if(typeof($("#agree").attr("checked"))=="boolean"){
			if($("#agree").attr("checked"))
			{
				$("#toubiao_submit").attr("disabled",false);
		  		$("#toubiao_submit").removeClass("toubiao_btn_disable");
		  		$("#toubiao_submit").addClass("toubiao_btn_able");
			}else{
				$("#toubiao_submit").attr("disabled",true);
	  			$("#toubiao_submit").removeClass("toubiao_btn_able");
	  			$("#toubiao_submit").addClass("toubiao_btn_disable");
			}
			return;
		}
	}