Tắt nút sau khi nhấp vào HTML

Thông thường, người dùng cuối muốn nhấn một vài lần vào nút gửi để đảm bảo nút được nhấp chắc chắn và điều đó sẽ gây ra sự cố gửi kép. Vì vậy, giải pháp phổ biến là vô hiệu hóa nút gửi sau khi người dùng nhấp vào nút đó

Sử dụng jQuery để bật/tắt nút gửi có nhiều lợi thế vì nó sẽ cho phép bạn bật/tắt nút dựa trên tương tác của người dùng. Để bật/tắt một nút với jQuery, bạn cần sử dụng các phương thức prop()/attr()

jQuery. chỗ dựa()

Nguồn đầy đủ. jQuery

jQuery. attr()

Ngoài ra, bạn có thể sử dụng phương thức jQuery attr() để bật/tắt một nút

Nguồn đầy đủ. jQuery

jQuery. attr() đấu với. jQuery. chỗ dựa()

Cả attr() và prop() đều được sử dụng để lấy hoặc đặt giá trị của thuộc tính đã chỉ định của thuộc tính phần tử, nhưng attr() trả về giá trị mặc định (Trạng thái ban đầu) của thuộc tính trong khi prop() trả về giá trị hiện tại (Trạng thái ban đầu)

1. attr() thay đổi thuộc tính cho thẻ HTML đó
2. prop() thay đổi thuộc tính cho thẻ HTML đó theo cây DOM

Trong phần lớn các trường hợp, prop() làm những gì mà attr() đã từng làm. Thay thế các cuộc gọi đến attr() bằng prop() trong mã của bạn thường sẽ hoạt động. Vì vậy, chúng tôi khuyên rằng nếu bạn đang sử dụng phiên bản mới hơn của JQuery, bạn nên sử dụng. prop() bất cứ khi nào có thể

Vô hiệu hóa nút gửi khi trường văn bản trống

Đó là một cách thực hành tốt để tắt nút gửi khi trường văn bản của họ trống. Điều này được thực hiện bằng cách kiểm soát trạng thái của nút (bật/tắt) dựa trên việc trường đầu vào được điền hay trống. Nguyên tắc tương tự áp dụng cho hộp kiểm và nút radio

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách tắt Nút và nút Gửi sau một cú nhấp chuột bằng JavaScript và jQuery

Tập lệnh cần được đặt trên trang web và nó sẽ vô hiệu hóa tất cả các nút và nút gửi ngay khi bất kỳ nút gửi nào được nhấp bằng JavaScript và jQuery

Trình xử lý sự kiện onb Beforeunload JavaScript

Trình xử lý sự kiện onb Beforeunload của JavaScript được thực thi trước khi trang được tải xuống. e. khi trang được chuyển hướng hoặc gửi đến máy chủ

Tắt nút Gửi sau khi nhấp bằng JavaScript

Đánh dấu HTML sau bao gồm Nút HTML và Nút gửi HTML. Khi nhấp vào nút Gửi, trình xử lý sự kiện onb Beforeunload của JavaScript được kích hoạt

Bên trong trình xử lý sự kiện onb Beforeunload của JavaScript, tất cả các phần tử Đầu vào HTML của nút loại hoặc gửi đều bị vô hiệu hóa bằng jQuery

Để tắt nút sau khi nhấp trong JavaScript, bạn có thể sử dụng thuộc tính disabled. Nếu thuộc tính disabled được đặt thành true, nút sẽ bị tắt và nếu thuộc tính được đặt thành false, nút sẽ được bật

Giả sử chúng ta có nút sau trong HTML

<button id='btn' onclick='disableBtn()'>Click Me</button>

Bất cứ khi nào nút ở trên được nhấp vào, hàm disableBtn() sẽ được kích hoạt trong đó chúng tôi sẽ đặt rõ ràng thuộc tính disabled của nút thành true

Đây là mã JavaScript liên quan cho nó

Thí dụ

function disableBtn(){
    document.getElementById('btn').disabled = true;
}

Thử ngay bây giờ

Tắt nút bằng phương thức addEventListener()

Bạn cũng có thể sử dụng phương pháp addEventListener() của DOM để tắt một nút sau khi nhấp. Ở đây, bạn không phải chỉ định bất kỳ chức năng rõ ràng nào trong tài liệu HTML như chúng ta đã làm trong ví dụ trước. e. onclick=’disableBtn()’

Đây là HTML được cập nhật

<button id='btn'>Click Me</button>

Và đây là mã JavaScript được cập nhật với addEventListener

Thí dụ

var button = document.getElementById('btn');
button.addEventListener('click', function(event){
   event.target.disabled = true; 
});

Thử ngay bây giờ

Vô hiệu hóa nhiều nút sau khi nhấp

Nếu bạn có nhiều nút trên một trang và bạn muốn tắt chúng sau khi nhấp vào, bạn có thể sử dụng cùng một khái niệm mà chúng tôi đã thảo luận ở trên

Trước tiên, bạn phải chọn các nút bằng bất kỳ phương thức DOM nào, chẳng hạn như

function disableBtn(){
    document.getElementById('btn').disabled = true;
}

Sau đó, bạn có thể lặp qua từng nút và thêm phương thức addEventListener() để lắng nghe sự kiện nhấp chuột và chỉ cần đặt thuộc tính disabled thành true bất cứ khi nào nhấp vào nút

Thuộc tính disabled có thể được đặt để ngăn người dùng nhấp vào nút cho đến khi một số điều kiện khác được đáp ứng (như chọn hộp kiểm, v.v. ). Sau đó, JavaScript có thể xóa giá trị bị vô hiệu hóa và làm cho nút có thể nhấp lại được

Làm cách nào để tắt nút sau khi được nhấp trong HTML?

Làm cách nào để tắt nút sau khi nhấp vào JavaScript?

Làm cách nào để tắt nút gửi trong HTML?