Thuộc tính phạm vi đầu vào HTML DOM đã bị vô hiệu hóa

Thuộc tính đã vô hiệu hóa phạm vi đầu vào HTML DOM được sử dụng để thiết lập hoặc trả lại nếu thanh trượt phạm vi có bị vô hiệu hóa hay không. Nó sử dụng các giá trị boolean với true đại diện cho thanh trượt phạm vi nên bị vô hiệu hóa và ngược lại là false. Thuộc tính bị vô hiệu hóa được đặt thành false theo mặc định. Tuy nhiên, phần tử bị vô hiệu hóa có màu xám theo mặc định và không thể nhấp vào được.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính bị vô hiệu hóa -

rangeObject.disabled = true|false;

Ở đây, thanh trượt true =phạm vi bị vô hiệu hóa và false =thanh trượt phạm vi không bị tắt. Nó là sai theo mặc định.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính Phạm vi đầu vào bị vô hiệu hóa -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính phạm vi đầu vào HTML DOM đã bị vô hiệu hóa

Khi nhấp vào nút BẬT, bạn không thể di chuyển thanh trượt ngay bây giờ -

Thuộc tính phạm vi đầu vào HTML DOM đã bị vô hiệu hóa

Trong ví dụ trên -

Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range”, id =“RANGE1”, name =“VOL” -

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

Sau đó, chúng tôi đã tạo một nút DISABLE sẽ thực thi phương thức disableRange () khi người dùng nhấp vào -

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

Phương thức disableRange () nhận phần tử đầu vào có phạm vi kiểu bằng phương thức getElementById () và đặt thuộc tính bị vô hiệu hóa của nó thành true. Điều này làm cho thanh trượt phạm vi không thể di chuyển được và người dùng không thể tương tác với nó nữa. Thanh trượt hiện đã được sửa -

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