首頁 > 開發者 > JavaScript
有10個複選框，使用者最多隻能勾選3個，否則就灰掉所有複選框。
（使用者再次勾掉複選框時，仍然可以再次選擇。）
將可變的部分設定為JS的參數，以實現代碼複用。
JS代碼第一個參數為複選框的name，第二個參數為最多允許的勾選值。
function choicetest(name,num){var choicearr = document.getElementsByName(name);var a=0;for(var i=0;i<choicearr.length;i++)if(choicearr[i].checked){a=a+1;}if(a==num){for(var i=0;i<choicearr.length;i++)if(!choicearr[i].checked)choicearr[i].disabled='disabled';}else{for(var i=0;i<choicearr.length;i++)choicearr[i].removeAttribute('disabled');}}
範常式序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title></head><script language="javascript">function choicetest(name,num){var choicearr = document.getElementsByName(name);var a=0;for(var i=0;i<choicearr.length;i++)if(choicearr[i].checked){a=a+1;}if(a==num){for(var i=0;i<choicearr.length;i++)if(!choicearr[i].checked)choicearr[i].disabled='disabled';}else{for(var i=0;i<choicearr.length;i++)choicearr[i].removeAttribute('disabled');}}</script><body ><div width="513" onclick="choicetest('choice',3)" > <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇1 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇2 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇3 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇4 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇5 <p></p> <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇6 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇7 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇8 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇9 <label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>選擇10</div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
