Thuộc tính disabled của HTML DOM Select trả về và cho phép thay đổi trạng thái vô hiệu hóa (disabled) của danh sách thả xuống trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
Lấy giá trị disabled:
object.disabled
Thiết lập disabled:
object.disabled = true | false
Ví dụ
Dưới đây là ví dụ về thuộc tính disabled của HTML DOM Select:
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } p{ font-weight:700; font-size:1.2rem; } .drop-down{ width:35%; border:2px solid #fff; font-weight:bold; padding:8px; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } .show{ font-size:1.5rem; font-weight:bold; } </style> </head> <body> <h1>Demo thuộc tính disabled của DOM Select</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down'> <option>Vật lý</option> <option>Toán học</option> <option>Hóa học</option> <option>Tiếng Anh</option> </select> <button onclick="disEna()" class="btn">Vô hiệu hóa/Kích hoạt</button> <div class="show"></div> <script> function disEna() { var dropDown = document.querySelector(".drop-down"); var showMsg = document.querySelector(".show"); showMsg.innerHTML =""; if (dropDown.disabled === true){ dropDown.disabled = false; showMsg.innerHTML ="Trước đây tôi bị vô hiệu hóa nhưng giờ đã được kích hoạt"; }else{ dropDown.disabled = true; showMsg.innerHTML ="Trước đây tôi được kích hoạt nhưng giờ đã bị vô hiệu hóa"; } } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhấn vào nút 「Vô hiệu hóa/Kích hoạt」 để vô hiệu hóa/kích hoạt danh sách thả xuống. Lần nhấn đầu tiên sẽ vô hiệu hóa:
Nhấn lần nữa để kích hoạt:
