PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

16 November 2008 By Ninenik Narkdee
checkbox จำกัด jquery

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





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

<!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 เป็นต้นไป อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ


   เพิ่มเติมเนื้อหา ครั้งที่ 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>






Tags:: จำกัด jquery checkbox






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


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