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 เป็นต้นไป
อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 5004 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 1802 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 5324 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 6609 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4911 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 7932 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4633 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 6458 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 7130 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 1223 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 5312 03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 2180 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 4238 25 Sep 08 การทำปุ่ม Print แบบรูปภาพ อ่าน 4580 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 20166 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 2371 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1857 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4760 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 14665 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2655