HTML DOM Input Radio ปิดใช้งานคุณสมบัติ

คุณสมบัติปิดการใช้งาน HTML DOM Input Radio ใช้สำหรับการตั้งค่าหรือส่งคืนหากปุ่มตัวเลือกควรปิดใช้งานหรือไม่ มันใช้ค่าบูลีนที่มีค่าจริงแทนองค์ประกอบที่ควรถูกปิดใช้งานและเท็จมิฉะนั้น คุณสมบัติที่ปิดใช้งานถูกตั้งค่าเป็นเท็จโดยค่าเริ่มต้น องค์ประกอบที่ถูกปิดใช้งานจะเป็นสีเทาโดยค่าเริ่มต้นและไม่สามารถคลิกได้

ไวยากรณ์

ต่อไปนี้เป็นวากยสัมพันธ์ของ −

ตั้งค่าคุณสมบัติผู้พิการ

radioObject.disabled = true|false;

ที่นี่ true=ปุ่มตัวเลือกถูกปิดใช้งาน และ false=ปุ่มตัวเลือกไม่ถูกปิดใช้งาน เป็นเท็จโดยค่าเริ่มต้น

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับคุณสมบัติที่ปิดการใช้งานวิทยุอินพุต -

<!DOCTYPE html>
<html>
<body>
<h1>Input radio disabled Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>Disable the above radio button by clicking on the DISABLE button</p>
<button type="button" onclick="disableRadio()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableRadio() {
      document.getElementById("Mango").disabled=true;
      document.getElementById("Sample").innerHTML = "The radio button is now disabled" ;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Input Radio ปิดใช้งานคุณสมบัติ

เมื่อคลิกปุ่มปิดการใช้งาน -

HTML DOM Input Radio ปิดใช้งานคุณสมบัติ

ในตัวอย่างข้างต้น −

ขั้นแรก เราได้สร้างองค์ประกอบอินพุตภายในแบบฟอร์มด้วย type=”radio”, name=”fruits”, id=”Mango”

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

จากนั้นเราได้สร้างปุ่ม DISABLE ที่จะรันเมธอด disableRadio() เมื่อผู้ใช้คลิก -

<button type=”button” onclick="disableRadio()">DISABLE</button>

เมธอด disableRadio() รับองค์ประกอบอินพุตด้วยวิทยุประเภทโดยใช้เมธอด getElementById() และตั้งค่าคุณสมบัติที่ปิดใช้งานเป็นจริง ปุ่มตัวเลือกนี้จะเป็นสีเทาและผู้ใช้จะโต้ตอบกับปุ่มดังกล่าวไม่ได้อีกต่อไป:

function disableRadio() {
   document.getElementById("Mango").disabled=true;
   document.getElementById("Sample").innerHTML = "The radio button is now disabled" ;
}