PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

16 November 2008 By
jquery checkbox จำกัด

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery checkbox จำกัด



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

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


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017


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






Tags:: checkbox จำกัด jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง