กำหนด ปุ่ม ให้ทำงาน เมื่อคลิกที่ checkbox ยอมรับเงื่อนไข ด้วย jQuery

21 December 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

jquery checkbox

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

UPDATE!
- 01-08-2019 | ดูแก้ไขเพิ่มเติมที่ 2

ตัวอย่างต่อไปนี้ ใช้สำหรับใช้งานการกำหนดให้ ปุ่มสามารถใช้งานได้
เมื่อคลิกที่ checkbox เพื่อยอมรับเงื่อนไข เหมาะใช้สำหรับแสดงในหน้าอ่านข้อตกลง หรือว่า
นโยบายของเว็บไซต์ ก่อนทำการ ดำเนินการต่อไปยังหน้าถัดไป

ตัวอย่าง

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

<form id="form1" name="form1" method="post" action="">
<input type="checkbox" name="i_accept" id="i_accept" />
ยอมรับเงื่อนไข 
<br />
<br />
<input type="submit" name="continue_bt" id="continue_bt" value="ดำเนินการต่อ" disabled="disabled" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	 $("#i_accept").click(function(){ // เมื่อคลิกที่ checkbox id=i_accept
		 if($(this).attr("checked")=="checked"){ // ถ้าเลือก
			 $("#continue_bt").removeAttr("disabled"); // ให้ปุ่ม id=continue_bt ทำงาน สามารถคลิกได้
		 }else{ // ยกเลิกไม่ทำการเลือก
			 $("#continue_bt").attr("disabled","disabled");  // ให้ปุ่ม id=continue_bt ไม่ทำงาน
		 }
	 });
});
</script>

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017

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

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 01-08-2019

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>

<body>


<form id="form1" name="form1" method="post" action="">
<input type="checkbox" name="i_accept" id="i_accept" />
ยอมรับเงื่อนไข 
<br />
<br />
<input type="button" name="continue_bt" id="continue_bt" value="ดำเนินการต่อ" 
   disabled   onclick="alert('ok')"  />
</form>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
     $("#i_accept").click(function(){ // เมื่อคลิกที่ checkbox id=i_accept
         if($(this).prop("checked")==true){ // ถ้าเลือก
             $("#continue_bt").removeAttr("disabled"); // ให้ปุ่ม id=continue_bt ทำงาน สามารถคลิกได้
         }else{ // ยกเลิกไม่ทำการเลือก
             $("#continue_bt").attr("disabled","disabled");  // ให้ปุ่ม id=continue_bt ไม่ทำงาน
         }
     });
});
</script>

</body>
</html>