Có nhiều lý do vô hiệu hóa nút trong ứng dụng web. Dù ngăn user thêm hàng hết hàng vào giỏ, hay không cho nhấn nút sau khi hành động thực hiện, jQuery không có phương thức trực tiếp vô hiệu hóa nút.
Thay vào đó, ta dùng phương thức prop(), bổ sung mới trong thư viện – xuất hiện từ jQuery 1.6. Được giới thiệu như giải pháp lấy giá trị thuộc tính (property) của phần tử được chọn. Trước đó, dùng attr() lấy giá trị attribute. Việc có phương thức lấy attribute value đồng thời lấy property value cho kết quả khó lường. Từ jQuery 1.6, prop() ra đời giải quyết sự chênh lệch này. Vì mục đích của ta, ta sẽ dùng prop() vô hiệu hóa nút vì "disabled" là giá trị property của phần tử HTML button.
Nếu muốn tìm hiểu thêm về attr() vs prop(), đọc lịch sử ngắn và tutorial.
Cú pháp jQuery prop()
Sau khi hiểu tại sao và cách dùng prop(), xem cú pháp. Nhớ prop() chỉ là phương thức jQuery khác và các phương thức này gọi trên phần tử được chọn – trong trường hợp ta là nút (button). Xem cách vô hiệu hóa nút có id "btn".
<button id='btn' type='submit'> Nút bị vô hiệu hóa </button>
HTML này render nút.
Nút đang render! Bây giờ đặt giá trị property "disabled" thành true dùng jQuery prop().
$('#btn').prop('disabled', true)
Nhìn thấy prop() nhận giá trị dạng chuỗi và thiết lập giá trị boolean ở đối số thứ hai. Giá trị boolean là true hoặc false.
Sau khi đặt property "disabled" thành true, render nút không thể nhấn. Hiểu cú pháp rồi, xem tại sao và khi nào muốn dùng. Phần tiếp theo xem ví dụ trang thương mại điện tử với sản phẩm có thuộc tính "sold-out?".
Sử dụng jQuery prop() vô hiệu hóa nút
Trong ví dụ này, có app mua sắm sẽ vô hiệu hóa nút "Thêm vào giỏ" nếu sản phẩm hết hàng. Render nút HTML đơn giản, và <div> thêm mục nếu không hết hàng.
<button class='add' type='submit'> Thêm vào giỏ </button> <div> </div>
Xem nút render như thế nào.
Tạo sản phẩm và callback function (hàm truyền cho hàm khác để gọi sau) hiển thị giỏ hàng trong <div> trên. Nếu sản phẩm hết hàng, nút sẽ vô hiệu hóa.
const product = {
name: 'Áo khoác',
price: 50.00,
soldOut: false
}
$(document).ready(function() {
$('button.add').click(function(event) {
event.preventDefault()
alert(JSON.stringify(product.soldOut))
if (product.soldOut) {
$('.add').prop('disabled', true)
} else {
$('div').append(product.name)
}
})
})
Tạo biến product chứa object. Object có property name, price, soldOut. Nếu soldOut false, nên thấy áo khoác hiển thị trong <div>. Nhấn Thêm vào giỏ xem sao.
Vì soldOut = false, sản phẩm hiển thị trong <div>. Nếu đó là áo khoác cuối cùng? Xem khi soldOut = true.
const product = {
name: 'Áo khoác',
price: 50.00,
soldOut: true
}
Mong đợi nút Thêm vào giỏ bị vô hiệu hóa.
Đúng như mong đợi. Dùng câu lệnh điều kiện trong callback function, ta vô hiệu hóa nút Thêm vào giỏ. User không thể thêm hàng hết hàng vào giỏ. Tránh được rắc rối lớn cho app thương mại điện tử!
Kết luận
Trong quá trình học vô hiệu hóa nút HTML bằng jQuery, ta khám phá jQuery không có phương thức explicit làm việc này. Để khắc phục, ta dùng prop() đặt property nút "disabled" thành true. Sau đó thấy ví dụ vô hiệu hóa nút hữu ích như thế nào.
Dẫn dắt trải nghiệm người dùng trong phát triển web là thiết yếu. Trong hướng dẫn này, ta dùng vô hiệu hóa nút dẫn dắt UX. Khám phá cách vô hiệu hóa nút có thể giúp điều hướng UX trong dự án tiếp theo của bạn.