您好,登錄后才能下訂單哦!
這篇文章主要介紹jQuery如何限制多選框選擇數量,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
由于刷新后,多選框會保留選中的,這時數量達到要求后還是可以選擇的bug,在前面加個判斷數量是否數量達到要求的處理就可以了。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> $(function(){ //加上判斷是否達到數量要求 if($(":checkbox").size()>=3){ $(":checkbox").removeAttr("checked"); $(":checkbox").attr("disabled","disabled"); $(":checkbox").removeAttr("disabled"); } var num = 0; $(":checkbox").each(function(){ $(this).click(function(){ if($(this)[0].checked) { ++num; if(num == 3) { //alert("最多選擇 三項 的上限已滿, 其他選項將會變為不可選."); $(":checkbox").each(function(){ if(!$(this)[0].checked) { $(this).attr("disabled", "disabled"); } }); } } else { --num; if(num <= 2) { $(":checkbox").each(function(){ if(!$(this)[0].checked) { $(this).removeAttr("disabled"); } }); } } }); }); }) </script> </head> <body> <input type="checkbox" />上網<br /> <input type="checkbox" />旅游<br /> <input type="checkbox" />逛街<br /> <input type="checkbox" />游戲<br /> <input type="checkbox" />聽歌<br /> <input type="checkbox" />購物<br /> </body> </html>
以上是“jQuery如何限制多選框選擇數量”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。