jQuery กับการจำกัดการเลือก checkbox
16 November 2008โค้ดตัวอย่างทั้งหมด
<!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>
ตัวอย่างผลผลลัพธ์
ตัวอย่างนี้ใช้งานกับ jQuery เวอร์ชั่น 1.7.1 เป็นต้นไป
อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10177 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 2756 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1039 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2732 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6371 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 2502 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3476 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 278 25 Sep 08 แนวทางการเขียน CSS ในรูปแบบย่อ อ่าน 4369 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2738 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2266 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4480 30 Oct 08 ฟังก์ชันตรวจสอบอีเมลล์ ด้วย php ละเอียดมากขึ้น php check verify email อ่าน 4351 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 6684 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5559 03 Nov 08 การส่งข้อมูลแบบ POST ด้วย Ajax อ่าน 8299 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 356 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4216 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 4714