อยากได้โค๊ด jQuery เป็นตัวอย่างทีใช้สำหรับใช้งาน โดยการเลือกปุ่ม checkbox ก่อนแล้วจึงเลือกปุ่ม radio ได้ (มีรูปภาพให้ชมครับ))

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากได้โค๊ด jQuery เป็นตัวอย่างทีใช้สำหรับใช้งาน โดยการเลือกปุ่ม checkbox ก่อนแล้วจึงเลือกปุ่ม radio ได้ (มีรูปภาพให้ชมครับ))

อยากได้โค๊ด jQuery เป็นตัวอย่างทีใช้สำหรับใช้งาน โดยการเลือกปุ่ม checkbox ก่อนแล้วจึงเลือกปุ่ม radio ได้ (มีรูปภาพให้ชมครับ))

อยากได้โค๊ด jQuery เป็นตัวอย่างทีใช้สำหรับใช้งาน โดยการเลือกปุ่ม checkbox ก่อนแล้วจึงเลือกปุ่ม radio ได้

จากรูปภาพ

 - บรรทัดแรก ถ้าไม่ทำการเลือกปุ่ม checkbox ก่อน ปุ่ม radio จะเป็น disabled="disabled" ไม่สามารถเลือกใช้งานได้

 - บรรทัดที่สอง ถ้าทำการเลือกปุ่ม checkbox ก่อนแล้ว ปุ่ม radio จะสามารถเลือกใช้งานได้



Nattkhanesha 08-08-2012 09:21:46

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

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


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


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

 ความคิดเห็นที่ 1
<!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></title>
</head>

<body>
<style type="text/css">
.text_for_radio{
	cursor:pointer;	
}
</style>
<br />
<br />
<div style="position:relative;margin:auto;width:700px;">
  <form id="form1" name="form1" method="post" action="">
    <input name="chk_box2" class="css_checkbox" type="checkbox" id="chk_box2" value="2" />
    <input type="radio" name="choice" id="radio" value="1" disabled="disabled" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  1</span>
    <input type="radio" name="choice" id="radio" value="2" disabled="disabled" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  2</span><br />
    <input name="chk_box2" class="css_checkbox"  type="checkbox" id="chk_box2" value="2" />
    <input type="radio" name="choice" id="radio" value="3" disabled="disabled" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  3</span>
    <input type="radio" name="choice" id="radio" value="4" disabled="disabled" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  4</span><br />
  </form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
$(function(){
	$(".css_checkbox").click(function(){
		if($(this).next(":radio").attr("disabled")=="disabled"){
			$(this).nextAll(":radio:lt(2)").removeAttr("disabled");			
		}else{
			$(this).nextAll(":radio:lt(2)").attr("disabled","disabled");
		}		
	});
	$(".text_for_radio").click(function(){
		$(this).prev("input[name='choice']").attr("checked","checked");
	});
});
</script>
</body>
</html>

ตัวอย่าง

กกก 



ข้อความสำหรับทดสอบที่ 1 ข้อความสำหรับทดสอบที่ 2
ข้อความสำหรับทดสอบที่ 3 ข้อความสำหรับทดสอบที่ 4


Ninenik Narkdee 08-08-2012
 ความคิดเห็นที่ 2

ขอบคุณมากครับ เว็บไซต์นี้มีประโยชน์กับผมมากๆเลย 



nattkhanesha 08-08-2012 15:28






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