Thuộc tính vô hiệu hóa tùy chọn HTML DOM trả về và sửa đổi xem phần tử tùy chọn có bị vô hiệu hóa hay không.
Cú pháp
Sau đây là cú pháp -
-
1. Trả lại bị vô hiệu hóa
object.disabled
-
2. 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 tùy chọn HTML DOM -
<!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 Option disabled Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="disMaths()" class="btn">Disable Maths</button>
<div class="show"></div>
<script>
function disMaths() {
document.querySelector(".drop-down").options[1].disabled=true;
document.querySelector(".show").innerHTML="Now you can't select Maths subject";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Tắt Toán học ”Để tắt tính năng toán học và sau đó cố gắng chọn chủ đề toán học.
