คุณสมบัติ HTML DOM Input Radio disabled

คุณสมบัติ disabled ของ input type="radio" ใช้สำหรับตั้งค่าหรือดึงค่า ว่า radio button ควรถูกปิดใช้งานหรือไม่ ใช้ค่า boolean: true = ปิดใช้งาน, false = ใช้งานได้ (ค่าเริ่มต้น) Radio button ที่ disabled จะเป็นสีเทาและคลิกไม่ได้

ไวยากรณ์ (Syntax)

การตั้งค่า disabled:

radioObject.disabled = true|false;

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ disabled ของ Input Radio</h1>
<form>
  ผลไม้: <input type="radio" name="fruits" id="Mango">มะม่วง
</form>
<p>คลิกปุ่ม DISABLE เพื่อปิดการใช้งาน radio button</p>
<button type="button" onclick="disableRadio()">ปิดใช้งาน</button>
<p id="Sample"></p>
<script>
  function disableRadio() {
    document.getElementById("Mango").disabled = true;
    document.getElementById("Sample").innerHTML = "Radio button ถูกปิดใช้งานแล้ว";
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Radio button "มะม่วง" ใช้งานได้ปกติ

หลังคลิก "ปิดใช้งาน": Radio button เปลี่ยนเป็นสีเทา คลิกไม่ได้ และข้อความยืนยันแสดงขึ้น

คำอธิบายโค้ด

• Radio button ปกติ: type="radio", name="fruits", id="Mango"
• ปุ่ม "ปิดใช้งาน" เรียก disableRadio()
• ฟังก์ชันตั้งค่า .disabled = true ทำให้ radio button ไม่สามารถโต้ตอบได้

จุดสังเกต: Radio button ที่ disabled จะไม่ส่งค่าไปกับฟอร์ม เมื่อ submit