Cách vô hiệu hóa (disable) phần tử trong HTML?

Sử dụng thuộc tính disabled (boolean) để vô hiệu hóa phần tử form: <button>, <input>, <select>, <textarea>, <optgroup>, <option>, <fieldset>. Phần tử disabled: không nhận focus, không gửi giá trị khi submit, không tương tác được.

Ví dụ

<!DOCTYPE html>
<html>
  <body>
    <p>Bạn thích môn thể thao nào?</p>
    <form action="" method="get">
      <input type="checkbox" name="vehicle" value="football" checked> Bóng đá<br>
      <input type="checkbox" name="vehicle" value="cricket" checked> Cricket<br>
      <input type="checkbox" name="vehicle" value="hockey"> Hockey<br>
      <input type="submit" value="Gửi" disabled>
    </form>
  </body>
</html>

Đặc điểm

• Boolean attribute: chỉ viết disabled hoặc disabled="disabled".
• CSS pseudo-class: :disabled để style (mặc định xám mờ).
• <fieldset disabled> vô hiệu hóa toàn bộ control bên trong.
• Khác với readonly (chỉ đọc, vẫn submit giá trị, vẫn focus được).

JavaScript

element.disabled = true;  // Vô hiệu hóa
element.disabled = false; // Kích hoạt
element.removeAttribute('disabled'); // Cách khác