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

21 December 2010 By Ninenik Narkdee
jquery checkbox

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





ตัวอย่างต่อไปนี้ ใช้สำหรับใช้งานการกำหนดให้ ปุ่มสามารถใช้งานได้
เมื่อคลิกที่ 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>




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





Tags:: jquery checkbox







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ