jQuery多選框選擇數(shù)量限制方法
更新時間:2017年02月08日 14:09:32 作者:每天都進步一點點
這篇文章主要為大家詳細介紹了jQuery多選框選擇數(shù)量限制方法,最多選擇 三項 的上限已滿, 其他選項將會變?yōu)椴豢蛇x
在網(wǎng)上找到的,可以使用。由于刷新后,多選框會保留選中的,這時數(shù)量達到要求后還是可以選擇的bug,在前面加個判斷數(shù)量是否數(shù)量達到要求的處理就可以了。
<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(){ //加上判斷是否達到數(shù)量要求 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("最多選擇 三項 的上限已滿, 其他選項將會變?yōu)椴豢蛇x."); $(":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" />上網(wǎng)<br /> <input type="checkbox" />旅游<br /> <input type="checkbox" />逛街<br /> <input type="checkbox" />游戲<br /> <input type="checkbox" />聽歌<br /> <input type="checkbox" />購物<br /> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
jQuery動畫顯示和隱藏效果實例演示(附demo源碼下載)
這篇文章主要介紹了jQuery動畫顯示和隱藏效果實現(xiàn)方法,并附帶了demo源碼供讀者下載參考,涉及jQuery操作圖片的顯示,隱藏及淡入淡出等效果,需要的朋友可以參考下2015-12-12JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件,本文通過示例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07jQuery實現(xiàn)百度登錄框的動態(tài)切換效果
這篇文章主要介紹了jQuery實現(xiàn)百度登錄框的動態(tài)切換效果,需要的朋友可以參考下2017-04-04JQuery給select添加/刪除節(jié)點的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query給select添加/刪除節(jié)點的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04使用jQuery模板來展現(xiàn)json數(shù)據(jù)的代碼
通常我們在使用ajax的時候,都避免不了和json這種輕巧的數(shù)據(jù)格式打交道。可是往往手動的去解析json,構建HTML,比較麻煩?,F(xiàn)在有了這個插件,就能像Extjs那樣使用模板解析json了。2010-10-10jquery移除button的inline onclick事件(已測試及兼容瀏覽器)
這種方法在Google Chrome下正常工作,但是在IE的兼容模式下會馬上調(diào)用reclick方法,這不是我們想要的效果;為了解決這個問題,我們可以換個思路,就是延遲綁定click事件2013-01-01