คุณสมบัติปิดการใช้งานช่วงอินพุต HTML DOM

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติปิดการใช้งาน -

rangeObject.disabled = true|false;

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

ตัวอย่าง

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

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

ผลลัพธ์

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

คุณสมบัติปิดการใช้งานช่วงอินพุต HTML DOM

เมื่อคลิกปุ่ม DISABLE คุณจะไม่สามารถเลื่อนตัวเลื่อนได้ในขณะนี้ -

คุณสมบัติปิดการใช้งานช่วงอินพุต HTML DOM

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

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range” , id=“RANGE1” ,name=“VOL” −

<form>
<input type="range" id="RANGE1" name="VOL">
</form>

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

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

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

function disableRange() {
   document.getElementById("RANGE1").disabled=true;
   document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}