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

Thuộc tính disabled của HTML DOM Input Reset được sử dụng để thiết lập hoặc trả về xem nút reset có bị vô hiệu hóa hay không. Sử dụng giá trị boolean: true biểu thị nút reset 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:

resetObject.disabled = true|false

Ở đây, true= nút reset bị vô hiệu hóa, false= nút reset 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 Reset:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính disabled của Input Reset</h1> 
<form style="border:solid 2px green;padding:2px"> 
Tên người dùng: <input type="text" id="USR"> <br> 
Vị trí: <input type="text" id="Age"> <br><br> 
<input type="reset" id="RESET1"> 
</form> 
<p>Vô hiệu hóa nút reset trên bằng cách nhấn nút VÔ HIỆU HÓA</p> 
<button type="button" onclick="disableReset()">VÔ HIỆU HÓA</button> 
<p id="Sample"></p> 
<script> 
    function disableReset() { 
        document.getElementById("RESET1").disabled=true; 
        document.getElementById("Sample").innerHTML = "Nút reset 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:

Trong ví dụ trên:

Chúng ta tạo phần tử <input> với type="reset", id="RESET1". Nhấn nút này sẽ reset dữ liệu form. Nút nằm trong form chứa hai trường text và form có style inline:

<form style="border:solid 2px green;padding:2px"> Tên người dùng: <input type="text" id="USR"> <br> Vị trí: <input type="text" id="Age"> <br><br> <input type="reset" id="RESET1"> </form>

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

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

Phương thức disableReset() lấy phần tử reset bằng getElementById() và thiết lập disabled=true. Điều này làm nút reset không thể click, người dùng không thể tương tác. Nút chuyển sang màu xám:

function disableReset() { 
    document.getElementById("RESET1").disabled=true; 
    document.getElementById("Sample").innerHTML = "Nút reset hiện đã bị vô hiệu hóa" ; 
}