jQuery กับการจำกัดการเลือก checkbox

16 November 2008

โค้ดตัวอย่างทั้งหมด

<!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
ช่อง 2
ช่อง 3
ช่อง 4
ช่อง 5


ตัวอย่างนี้ใช้งานกับ jQuery เวอร์ชั่น 1.7.1 เป็นต้นไป อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ





บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 4660 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 4645 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4638 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4636 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4605 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4599 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 4562 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4549 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 4510 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4480 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 4467 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4466 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4420 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4329 16 Aug 09 jQuery UI คือ อะไร อ่าน 4303

บทความคนเข้าอ่านวันนี้

22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10177 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 2756 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1039 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2732 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6371 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 2502 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3476 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 278 25 Sep 08 แนวทางการเขียน CSS ในรูปแบบย่อ อ่าน 4369 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2738 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2266 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4480 30 Oct 08 ฟังก์ชันตรวจสอบอีเมลล์ ด้วย php ละเอียดมากขึ้น php check verify email อ่าน 4351 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 6684 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5559 03 Nov 08 การส่งข้อมูลแบบ POST ด้วย Ajax อ่าน 8299 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 356 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4216 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 4714
จำนวนผู้เยี่ยมชม 777838
คน 2012 © Copyright ninenik.com. All rights reserved.