Cách vô hiệu hóa nút HTML bằng JavaScript

Cach Vo Hieu Hoa Nut Html Bang Javascript



Trong JavaScript, các lập trình viên hầu như vô hiệu hóa nút gửi trong biểu mẫu để đảm bảo rằng tất cả các trường bắt buộc đã được điền trước khi gửi. Ngoài ra, nó giúp ngăn chặn nhiều lần gửi. Trong một số trường hợp nhất định, các nhà phát triển có thể muốn tắt một nút dựa trên trạng thái của ứng dụng hoặc kết quả của một hành động trước đó. Ví dụ: giả sử người dùng đã gửi biểu mẫu hoặc thực hiện bất kỳ tác vụ nào. Trong trường hợp đó, bạn sẽ vô hiệu hóa “ nộp ' hoặc là ' hoàn thành ” để ngăn họ gửi hoặc hoàn thành lại.

Bài viết này sẽ minh họa phương pháp vô hiệu hóa nút HTML trong JavaScript.

Làm cách nào để vô hiệu hóa nút HTML bằng JavaScript?

Để tắt nút HTML bằng JavaScript, hãy sử dụng “ tàn tật ” thuộc tính của phần tử nút. Nút này cũng bị tắt bằng cách sử dụng thuộc tính HTML “đã tắt”, nhưng nút này sẽ bị tắt vĩnh viễn và bạn sẽ không thể bật lại nút này lần nữa. Trong khi sử dụng JavaScript, thuộc tính “disabled” có thể bị vô hiệu hóa và kích hoạt nút một cách linh hoạt.







cú pháp
Cú pháp đã cho được sử dụng để tắt nút:



buttonObject. tàn tật

Ví dụ 1: Tắt Nút
Tạo một nút trong tệp HTML và gán id “ cái nút ” sẽ giúp truy cập vào nút này:



< id nút = 'cái nút' > Cái nút cái nút >

Tìm nạp nút HTML trong tệp JavaScript, sử dụng id được chỉ định của chúng với sự trợ giúp của “ getElementById() ' phương pháp:





đã từng là cái nút = tài liệu. getElementById ( 'cái nút' ) ;

Đặt thuộc tính “ tàn tật ' ĐẾN ' ĐÚNG VẬY ”:

cái nút. tàn tật = ĐÚNG VẬY ;

Như bạn có thể thấy, nút ở đầu ra đã bị tắt:



Ví dụ 2: Vô hiệu hóa Nút trên Sự kiện Nhấp chuột
Ở đây, chúng tôi sẽ vô hiệu hóa nút trong khi nhấp vào nó. Đầu tiên, lấy tham chiếu của nút bằng cách sử dụng id được chỉ định của nó:

đã từng là cái nút = tài liệu. getElementById ( 'cái nút' ) ;

Gọi ' addEventListener() ” phương pháp bằng cách đính kèm “ nhấp chuột ” sự kiện sẽ đặt thuộc tính bị vô hiệu hóa “ ĐÚNG VẬY ” trong khi nhấp vào nút:

cái nút. addEventListener ( 'nhấp chuột' , chức năng ( ) {
nếu như ( cái nút. tàn tật ) {
cái nút. tàn tật = SAI ;
}
khác {
cái nút. tàn tật = ĐÚNG VẬY ;
}
} ) ;

Có thể quan sát thấy rằng trong khi nhấp vào nút, nó sẽ bị vô hiệu hóa:

Đó là tất cả về nút tắt trong JavaScript.

Phần kết luận

Để tắt nút HTML trong JavaScript, hãy sử dụng “ tàn tật ” thuộc tính của phần tử nút. Nó giúp kích hoạt hoặc vô hiệu hóa nút một cách linh hoạt trong khi thuộc tính HTML “disabled” vô hiệu hóa vĩnh viễn nút này. Bài viết này minh họa phương pháp vô hiệu hóa nút HTML trong JavaScript.