Thuộc tính disabled của Input Range trong HTML DOM

Thuộc tính disabled của HTML DOM Input Range được sử dụng để thiết lập hoặc trả về xem thanh trượt range có bị vô hiệu hóa hay không. Sử dụng giá trị boolean: true biểu thị thanh trượt bị vô hiệu hóa, false ngược lại. Mặc định disabled là false. Phần tử bị vô hiệu hóa hiển thị màu xám và không thể click.

Cú pháp

Cú pháp để thiết lập thuộc tính disabled:

rangeObject.disabled = true|false;

Ở đây, true= thanh trượt bị vô hiệu hóa, false= thanh trượt không bị vô hiệu hóa. Mặc định là false.

Ví dụ

Ví dụ minh họa cho thuộc tính disabled của Input Range:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính disabled của Input Range</h1> 
<form> 
<input type="range" id="RANGE1" name="VOL"> 
</form> 
<p>Vô hiệu hóa thanh trượt trên bằng cách nhấn nút VÔ HIỆU HÓA</p> 
<button type="button" onclick="disableRange()">VÔ HIỆU HÓA</button> 
<p id="Sample"></p> 
<script> 
    function disableRange() { 
        document.getElementById("RANGE1").disabled=true; 
        document.getElementById("Sample").innerHTML = "Thanh trượt hiện đã bị vô hiệu hóa" ; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút VÔ HIỆU HÓA, bạn không thể di chuyển thanh trượt nữa:

Trong ví dụ trên:

Chúng ta tạo trường input trong form với type="range", id="RANGE1", name="VOL":

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

Tạo nút VÔ HIỆU HÓA thực thi phương thức disableRange() khi được nhấn:

<button type="button" onclick="disableRange()">VÔ HIỆU HÓA</button>

Phương thức disableRange() lấy phần tử range bằng getElementById() và thiết lập disabled=true. Điều này làm thanh trượt không thể di chuyển, người dùng không thể tương tác. Thanh trượt bị cố định:

function disableRange() { 
    document.getElementById("RANGE1").disabled=true; 
    document.getElementById("Sample").innerHTML = "Thanh trượt hiện đã bị vô hiệu hóa" ; 
}