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

16 November 2008 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

checkbox จำกัด jquery

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

ดูแล้ว 15,153 ครั้ง

UPDATE! อัพเดทล่าสุด 22-01-2019
เนื้อหาเริ่มต้นของบทความนี้ เป็นเนื้อหาเก่า แต่มีการอัพเดทเนื้อหาเพิ่มเติม ต่อท้ายจากเนื้อหาเดิม
โปรดเลื่อนดูรายละเอียดการอัพเดทด้านล่างของบทความ

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

<!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 วันที่ 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>