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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
jquery checkbox

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

ดูแล้ว 25,630 ครั้ง




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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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