PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

16 November 2008 By


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

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

Tags:: jquery checkbox จำกัด



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


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