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

Bookmark and Share

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.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).attr("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>

HTML Code

<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>

ตัวอย่างผลลัพธ์

เลือกฃ่องทีวีที่ชื่นชอบ
ช่อง 1
ช่อง 2
ช่อง 3
ช่อง 4
ช่อง 5



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

30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 2864 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 2856 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 2810 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 2805 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 2780 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 2700 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 2679 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 2608 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 2605 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 2578 16 Aug 09 jQuery UI คือ อะไร อ่าน 2563 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 2547 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 2507 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 2483 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2458
จำนวนผู้เยี่ยมชม 189222 คน 2010 © Copyright ninenik.com. All rights reserved.