Thuộc tính disabled của thẻ <option> trong HTML

Thuộc tính disabled của phần tử <option> được dùng để thiết lập một tùy chọn bị vô hiệu hóa từ danh sách các tùy chọn. Sau đó, tùy chọn bị vô hiệu hóa sẽ không thể click chọn được.

Cú pháp

Cú pháp như sau:

<option disabled>

Ví dụ

Ví dụ triển khai thuộc tính disabled của phần tử <option>:

<!DOCTYPE html> <html> <body> 
<h2>Mức độ tạp chất của nước</h2> 
<p>Mức tạp chất <meter min="0" low="50" high="95" max="100" value="85"></meter></p> 
<select> 
    <optgroup label="Tỷ lệ"> 
        <option value="one">3:2</option> 
        <option value="two" disabled>5:3</option> 
    </optgroup> 
    <optgroup label="Nước"> 
        <option value="low">2L</option> 
        <option value="Medium">5L</option> 
        <option value="high">10L</option> 
        <option value="veryhigh">20L</option> 
    </optgroup> 
</select> 
</body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả sau. Ở đây, tùy chọn 5:3 dưới optgroup Tỷ lệ:

Trong ví dụ trên, chúng ta có các nhóm tùy chọn (optgroup) và các option bên trong:

<select> 
    <optgroup label="Tỷ lệ"> 
        <option value="one">3:2</option> 
        <option value="two" disabled>5:3</option> 
    </optgroup> 
    <optgroup label="Nước"> 
        <option value="low">2L</option> 
        <option value="Medium">5L</option> 
        <option value="high">10L</option> 
        <option value="veryhigh">20L</option> 
    </optgroup> 
</select>

Chúng ta vô hiệu hóa một option bằng thuộc tính disabled:

<option value="two" disabled>5:3</option>

Bây giờ bạn không thể chọn tùy chọn đó vì nó đã bị vô hiệu hóa.