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
Tự mình thử
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)
- attr() thay đổi thuộc tính cho thẻ HTML đó
- 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' title='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. title=’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; }0. Điều này sẽ trả lại cho bạn một mảng của tất cả các nút
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