Thuộc tính disabled
Thuộc tính disabled vô hiệu hóa một phần tử
biểu mẫu HTML,
tức là làm cho nó không hoạt động. Đây là một thuộc tính
không có giá trị.
Việc vô hiệu hóa các phần tử thường cần thiết để ngăn người dùng thay đổi một số giá trị (những giá trị này, tuy nhiên, vẫn cần được hiển thị cho người dùng dưới dạng các phần tử biểu mẫu). Đôi khi các phần tử bị vô hiệu hóa (và được bỏ vô hiệu hóa) bằng cách sử dụng JavaSctipt.
Hành vi
Trong trường hợp nút (button
hoặc input
với thuộc tính type có giá trị button,
reset hoặc submit) việc vô hiệu hóa
có nghĩa là nút không thể được nhấp.
Trong trường hợp trường nhập văn bản (input
hoặc textarea)
thì không thể thay đổi hoặc sao chép
văn bản trong đó. Trong trường hợp hộp kiểm
và nút radio
thì không thể thay đổi trạng thái của chúng (được chọn hay không).
Trong trường hợp danh sách thả xuống
select
thì không thể thay đổi mục đã chọn.
Một phần tử bị vô hiệu hóa mặc định có nền màu xám. Nó cũng sẽ không tham gia vào chuyển đổi bằng phím Tab.
Ví dụ . Nút bị vô hiệu hóa
Hãy vô hiệu hóa một nút bằng thuộc tính
disabled. Để so sánh, bên cạnh là ví dụ
một nút không bị vô hiệu hóa (hãy thử nhấp vào nó):
<button disabled>text</button>
<button>text</button>
:
Ví dụ . Hộp kiểm bị vô hiệu hóa
Bây giờ hãy xem một hộp kiểm bị vô hiệu hóa. Để so sánh, bên cạnh là ví dụ một hộp kiểm không bị vô hiệu hóa:
<input type="checkbox" disabled>
<input type="checkbox">
:
Ví dụ . Hộp kiểm bị vô hiệu hóa và được chọn
Hãy xem một hộp kiểm bị vô hiệu hóa
và được chọn bằng thuộc tính checked
trông như thế nào. Để so sánh, bên cạnh
là ví dụ một hộp kiểm được chọn nhưng không bị vô hiệu hóa:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Ví dụ . Trường nhập văn bản bị vô hiệu hóa
Bây giờ hãy vô hiệu hóa một trường nhập. Để so sánh, bên cạnh là ví dụ một trường nhập không bị vô hiệu hóa:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Ví dụ . Trường văn bản textarea bị vô hiệu hóa
Ở đây chúng ta sẽ thấy một trường văn bản textarea bị vô hiệu hóa (lưu ý rằng có thể thay đổi kích thước của textarea bị vô hiệu hóa). Để so sánh, bên cạnh là ví dụ một textarea không bị vô hiệu hóa:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Ví dụ . Danh sách thả xuống bị vô hiệu hóa
Hãy xem cách hoạt động của một
select bị vô hiệu hóa.
Để so sánh, bên cạnh là ví dụ một danh sách thả xuống không bị vô hiệu hóa:
<select disabled>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
<select>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
:
