HTML代碼如下：
<div> <input type="checkbox" name="ckb" value="1" />1 <input type="checkbox" name="ckb" value="2" />2 <input type="checkbox" name="ckb" value="3" />3 <input type="checkbox" name="ckb" value="4" />4 <input type="checkbox" name="ckb" value="5" />5 <input type="checkbox" name="ckb" value="6" />6 <input type="checkbox" name="ckb" value="7" />7 <input type="checkbox" name="ckb" value="8" />8 <input type="checkbox" name="ckb" value="9" />9 <input type="checkbox" name="ckb" value="10" />10 </div>
JS代碼：
//當復選框選中超過六個時，其余未選中的復選框被禁用
var num = 0; $(":checkbox").each(function(){ if(this.checked == true){ num++; } }); if(num >= 6){ $(":checkbox").each(function(){ //each遍歷 if(this.checked == false){ $(this).attr("disabled", "disabled"); //禁用 } }); }else if(num < 6){ $(":checkbox").each(function(){ if(this.checked == false){ $(this).removeAttr("disabled"); //解除禁用 } }); }
了解：
checked
定義和用法
checked 屬性設置或返回 checkbox 是否應被選中。
語法
checkboxObject.checked=true|false
說明
該屬性保存了 checkbox 的當前狀態，不管何時，這個值發生變化的時候，onclick 事件句柄就會觸發（也可能觸發 onchange 事件句柄）。
實例
下面的例子可設置該 checkbox 的狀態：
<html> <head> <script type="text/javascript"> function check() { document.getElementById("check1").checked=true } function uncheck() { document.getElementById("check1").checked=false } </script> </head> <body> <form> <input type="checkbox" id="check1" /> <input type="button" onclick="check()" value="Check Checkbox" /> <input type="button" onclick="uncheck()" value="Uncheck Checkbox" /> </form> </body> </html>
disabled
定義和用法
disabled 屬性可設置或返回是否禁用 checkbox。
語法
checkboxObject.disabled=true|false
實例
下面的例子禁用了該 checkbox：
<html> <head> <script type="text/javascript"> function disable() { document.getElementById("check1").disabled=true } </script> </head> <body> <form> <input type="checkbox" id="check1" /> <input type="button" onclick="disable()" value="Disable Checkbox" /> </form> </body> </html>