Cách vô hiệu hoá Button trong HTML bằng JavaScript

Cách vô hiệu hoá Button trong HTML bằng JavaScript

Cách vô hiệu hoá Button trong HTML bằng JavaScript

Đôi khi, chúng ta muốn vô hiệu hoá Button trong HTML bằng JavaScript.

Trong bài viết này, chúng ta sẽ xem xét cách vô hiệu hoá Button trong HTML bằng JavaScript.

Thẻ Button trong HTML

Thẻ <button> trong HTML được sử dụng để tạo các nút có thể click bên trong form trên trang web của bạn. Bạn có thể đặt nội dung như văn bản hoặc hình ảnh vào bên trong thẻ <button>……..</button>.

Bạn nên luôn chỉ định thuộc tính type cho một thẻ <button>. Vì các trình duyệt sử dụng kiểu mặc định khác nhau cho phần tử button.

Thẻ HTML Button có thể được sử dụng bên trong hoặc bên ngoài form.

Bên trong form, nó có tác dụng như một nút gửi hoặc reset form.

Bên ngoài form, nó có thể gọi hàm JavaScript để thực hiện một nhiệm vụ nào đó.

Ví dụ về thẻ button trong HTML

1<buttonname="button"type="button">Click Here</button>

Ví dụ thẻ button trong HTML: gọi hàm JavaScript

Trong ví dụ này, khi bạn click nút click here trình duyệt sẽ hiển thị thông báo với nội dung “hello html button”.

123456<buttonname="button"value="OK"type="button"onclick="hello()">Click Here</button<script  function hello(){      alert("hello html button");    </script>
Cach vo hieu hoa Button trong HTML bang JavaScript

Ví dụ thẻ button trong HTML: Submit Form

Trong ví dụ này, khi bạn click nút Submit, các thông tin trong form sẽ được gửi đến máy chủ.

1234<formEnter Name:<inputtype="text"name="name"/><br/>  <button>Submit</button</form

Ví dụ thẻ button trong HTML: Reset Form

Trong ví dụ này, khi bạn click vào nút resut thì những phần tử trong form được reset về giá trị ban đầu.

1234<formEnter Name:<inputtype="text"name="name"/><br/>  <buttontype="reset">reset</button</form>
Cach vo hieu hoa Button trong HTML bang JavaScript3

Các thuộc tính của thẻ button trong HTML

Thẻ <button> hỗ trợ toàn bộ thuộc tính chung như các thẻ HTML khác và một số thuộc tính bổ xung trong bảng sau:

Thuộc tínhMô tả
autofocusChỉ định rằng một nút sẽ tự động focus trong khi tải trang.
disabledChỉ định một button sẽ bị vô hiệu hóa.
formChỉ định button này thuộc về một hoặc nhiều form.
formactionĐược sử dụng cho kiểu submit. Nó chị định rằng dữ liệu của form sẽ được gửi đi đâu khi form được submit.
formmethodChỉ đinh dữ liệu của form được gửi như thế nào.
formenctypeNó chỉ định cách dữ liệu của form nên được mã hóa trước khi gửi nó tới máy chủ.
formnovalidateChỉ định rằng dữ liệu của form nên được kiểm tra tính hợp lệ khi submit.
formtargetChỉ định dữ liệu trả về sẽ được hiển thị ở đâu sau khi submit form.
nameChỉ định tên của button.
typeChỉ định kiểu của button.
valueChỉ định giá trị của button.

Cách vô hiệu hoá Button trong HTML bằng JavaScript

Đặt thuộc tính bị vô hiệu hóa của Button trong HTML thành true

Để tắt Button trong HTML bằng JavaScript, chúng ta có thể chọn Button và sau đó đặt thuộc tính disable của nó.

Ví dụ: nếu chúng ta có HTML sau:

<button> click me </button>
Code language: HTML, XML (xml)

Sau đó, chúng ta có thể chọn button với document.querySelector và đặt thuộc tính disable của nó bằng cách viết:

document.querySelector("button").disabled = true;
Code language: JavaScript (javascript)

Bây giờ chúng ta sẽ thấy button bị vô hiệu hóa.

Sử dụng phương pháp setAttribute để đặt thuộc tính bị vô hiệu hóa của button

Một cách khác để đặt thuộc tính bị vô hiệu hóa của nút là sử dụng phương thức setAttribute.

Ví dụ: nếu chúng ta có HTML sau:

<button> click me </button>
Code language: HTML, XML (xml)

Sau đó, chúng ta có thể chọn button với document.querySelector và đặt thuộc tính disable của nó với setAttribute bằng cách viết:

document.querySelector("button").setAttribute("disabled", "disabled");
Code language: JavaScript (javascript)

Chúng ta gọi setAttribute với tên thuộc tính cần đặt và giá trị để đặt thành đối số tương ứng.

Ngoài ra, chúng ta có thể viết:

document.querySelector("button").setAttribute("disabled", true);
Code language: JavaScript (javascript)

để đặt thuộc tính hàng đầu disabletrue để tắt button.

Kết luận

Chúng ta có thể vô hiệu hóa một button trong HTML bằng JavaScript bằng cách đặt thuộc tính disable của button đã chọn bằng JavaScript.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận