Cách bật và tắt các nút bằng JavaScript (Dựa trên trạng thái)

Tìm hiểu cách tắt hoặc bật các nút dựa trên việc trường nhập liệu có trống hay không.

Khi điền vào các biểu mẫu trên web, bạn sẽ nhận thấy rằng bạn thường không thể gửi biểu mẫu cho đến khi tất cả hoặc một số trường văn bản được điền (các trường bắt buộc). Nguyên tắc tương tự cũng áp dụng cho hộp kiểm và nút radio.

Dưới đây là cách kiểm soát trạng thái nút của bạn (được bật so với bị vô hiệu hóa) dựa trên việc trường đầu vào của bạn có trống hay không.

HTML

Thêm HTML sau vào trình chỉnh sửa của bạn:

<input class="input" type="text" placeholder="fill me" />
<button class="button">Click Me</button>

JavaScript

Thêm JavaScript sau

let input = document.querySelector(".input")
let button = document.querySelector(".button")

button.disabled = true

input.addEventListener("change", stateHandle)

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true
  } else {
    button.disabled = false
  }
}

Bây giờ, bạn có một nút bị tắt miễn là trường đầu vào của bạn trống và được bật ngay khi bạn bắt đầu điền.

Kiểm tra bản trình diễn với tất cả mã làm việc.

Mã demo.

Cách hoạt động của mã HTML &JavaScript

Đầu tiên, chúng tôi xác định một vài phần tử HTML, một trường đầu vào và một nút. Sau đó, chúng tôi sử dụng JavaScript để tạo hai biến để lưu trữ tham chiếu đến mỗi phần tử input &button . Giờ đây, chúng tôi có toàn quyền kiểm soát để thao tác lập trình từng phần tử.

Chúng tôi bắt đầu bằng cách tắt trạng thái của nút. Theo mặc định, trạng thái của nút được bật trong HTML. Bằng cách sử dụng disabled = true nút hiện chuyển sang màu xám (bị vô hiệu hóa) trong giao diện người dùng cho người dùng.

Sau đó, chúng tôi đính kèm một trình xử lý sự kiện (addEventListener ) đến đầu vào input biến với thuộc tính sự kiện change , là một thuộc tính lắng nghe (theo dõi) các tương tác với các phần tử. Trong trường hợp này, chúng tôi muốn biết khi nào người dùng tương tác với trường đầu vào bằng cách nhập vào bên trong trường và sau đó phản ứng với sự kiện đó bằng cách chạy một hàm.

Hàm chúng tôi chạy được gọi là stateHandler và nó sẽ kích hoạt mỗi khi có thay đổi bên trong trường đầu vào.

Mã bên trong stateHandler cho biết “nếu giá trị của trường đầu vào là một chuỗi trống (=== '' ) sau đó tắt nút, nếu không (else ) kích hoạt nó.