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

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

ไวยากรณ์ (Syntax)

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

rangeObject.disabled = true|false;

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

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

ผลลัพธ์

เริ่มต้น: Slider ลากได้ปกติ

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

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

• Slider ปกติ: type="range", id="RANGE1", name="VOL"
• ปุ่ม "ปิดใช้งาน" เรียก disableRange()
• ตั้งค่า .disabled = true ทำให้ slider ไม่สามารถโต้ตอบได้

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