jQuery กับการจำกัดการเลือก checkbox
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeecheckbox jquery จำกัด
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ checkbox jquery จำกัด
ดูแล้ว 14,623 ครั้ง
UPDATE! อัพเดทล่าสุด 22-01-2019
เนื้อหาเริ่มต้นของบทความนี้ เป็นเนื้อหาเก่า แต่มีการอัพเดทเนื้อหาเพิ่มเติม ต่อท้ายจากเนื้อหาเดิม
โปรดเลื่อนดูรายละเอียดการอัพเดทด้านล่างของบทความ
เนื้อหาเริ่มต้นของบทความนี้ เป็นเนื้อหาเก่า แต่มีการอัพเดทเนื้อหาเพิ่มเติม ต่อท้ายจากเนื้อหาเดิม
โปรดเลื่อนดูรายละเอียดการอัพเดทด้านล่างของบทความ
ไปที่ Copy
โค้ดตัวอย่างทั้งหมด
<!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>jquery v 1.6.1</title> </head> <body> <form id="form1" name="form1" method="post" action=""> เลือกฃ่องทีวีที่ชื่นชอบ<br /> <input name="ch1" type="checkbox" id="ch1" value="ch 1" class="chkbox" /> ช่อง 1<br /> <input name="ch2" type="checkbox" id="ch2" value="ch 2" class="chkbox" /> ช่อง 2<br /> <input name="ch3" type="checkbox" id="ch3" value="ch 3" class="chkbox" /> ช่อง 3<br /> <input name="ch4" type="checkbox" id="ch4" value="ch 4" class="chkbox" /> ช่อง 4<br /> <input name="ch5" type="checkbox" id="ch5" value="ch 5" class="chkbox" /> ช่อง 5<br /> </form> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function(){ var num_check=0; var limit_check=3;// จำนวน checkbox ที่จำกัด var name_selector=":checkbox.chkbox"; // jquery selector $(name_selector).each(function(){ $(this).click(function(){ if($(this).is(":checked")==true){ num_check++; }else{ if(num_check!=0){ num_check--; } } if(num_check<limit_check){ $(name_selector+":not(:checked)").removeAttr("disabled"); }else{ $(name_selector+":not(:checked)").attr("disabled","true"); } }); }); }); </script> </body> </html>
ตัวอย่างผลผลลัพธ์
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017
ตัวอย่างนี้ใช้งานกับ jQuery เวอร์ชั่น 1.7.1 เป็นต้นไป
อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ
เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 22-01-2019
แนวทางที่สอง
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.8.3.js"></script> </head> <body> <form id="form1" name="form1" method="post" action=""> เลือกฃ่องทีวีที่ชื่นชอบ<br /> <input name="ch1" type="checkbox" id="ch1" value="ch 1" class="chkbox" /> ช่อง 1<br /> <input name="ch2" type="checkbox" id="ch2" value="ch 2" class="chkbox" /> ช่อง 2<br /> <input name="ch3" type="checkbox" id="ch3" value="ch 3" class="chkbox" /> ช่อง 3<br /> <input name="ch4" type="checkbox" id="ch4" value="ch 4" class="chkbox" /> ช่อง 4<br /> <input name="ch5" type="checkbox" id="ch5" value="ch 5" class="chkbox" /> ช่อง 5<br /> </form> <script type="text/javascript"> $(function(){ var num_check=0; var limit_check=3;// จำนวน checkbox ที่จำกัด var name_selector=":checkbox.chkbox"; // jquery selector var name_selected=":checkbox.chkbox:checked"; // jquery selector $(name_selector).on("click",function(e){ num_check = $(name_selected).length; if(num_check>limit_check){ e.preventDefault(); } console.log(num_check); }); }); </script> </body> </html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ