Thuộc tính HTML select bị vô hiệu trả về và sửa đổi xem danh sách thả xuống trong tài liệu HTML có bị vô hiệu hóa hay không.
Cú pháp
Sau đây là cú pháp -
-
Trả lại bị vô hiệu hóa
object.disabled
-
Sửa đổi bị vô hiệu hóa
object.disabled = true | false
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính đã vô hiệu hóa DOM select trong HTML -
<!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>DOM Select disabled Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="disEna()" class="btn">Disable/Enable</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 ="Previously, I was disabled but now I am enabled";
}else{
dropDown.disabled = true;
showMsg.innerHTML ="Previously, I was enabled but now I am disabled";
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Tắt / Bật ”Để tắt / bật danh sách thả xuống. Trong lần nhấp đầu tiên, chức năng tắt sẽ hoạt động -
Bây giờ hãy nhấp lại để bật -
