กำหนด ปุ่ม ให้ทำงาน เมื่อคลิกที่ checkbox ยอมรับเงื่อนไข ด้วย jQuery
เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdeejquery checkbox
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery checkbox
UPDATE!
- 01-08-2019 | ดูแก้ไขเพิ่มเติมที่ 2
- 01-08-2019 | ดูแก้ไขเพิ่มเติมที่ 2
ไปที่ Copy
ตัวอย่างต่อไปนี้ ใช้สำหรับใช้งานการกำหนดให้ ปุ่มสามารถใช้งานได้
เมื่อคลิกที่ 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()