Làm cách nào để tắt nút trong HTML sau một cú nhấp chuột?
Để tắt một nút chỉ bằng JavaScript, bạn cần đặt thuộc tính Show
Và để bật một nút, chúng tôi sẽ làm ngược lại bằng cách đặt thuộc tính JavaScript Đây là một ví dụ đầy đủ hơn nơi chúng tôi chọn nút và sau đó chúng tôi thay đổi thuộc tính bị vô hiệu hóa của nó
Đây là những bước chúng ta phải làm theo
Ví dụ về nút tắtĐối với mục đích demo và để giữ cho nó đơn giản nhất có thể, chúng tôi sẽ vô hiệu hóa nút khi nhấp vào chính nó Tìm hiểu cách bật hoặc tắt các nút bằng javascript và jQuery dựa trên việc trường nhập liệu được điền hay trống Nếu bạn là người mới bắt đầu hoặc chưa quen lắm với javascript hoặc jQuery, chúng tôi khuyên bạn nên xem qua toàn bộ bài viết. Tuy nhiên, nếu bạn chỉ đang tìm mã, Mục lục
Giới thiệu về nút tắt/bậtThông thường, trong khi điền vào các biểu mẫu web, bạn có nhận thấy nút gửi không hoạt động như thế nào trừ khi chúng tôi đã điền vào tất cả các trường bắt buộc khô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 Bạn có muốn triển khai một tính năng như vậy trên biểu mẫu web của mình không? Trước khi đi sâu vào mã, trước tiên chúng ta hãy xem logic đằng sau việc chuyển đổi giữa các trạng thái khác nhau của nút Logic đằng sau việc chuyển đổi giữa trạng thái tắt và bật của các nút
Dưới đây, chúng ta sẽ xem cách tắt/bật một nút với một trường văn bản bắt buộc được triển khai bằng Javascript và jQuery Thực thi mã để thay đổi trạng thái của nút1. Sử dụng JavascriptMỘT) HTMLThêm mã HTML sau vào trình chỉnh sửa của bạn
Giải thích mãSử dụng đoạn mã trên, chúng tôi đã xác định hai thành phần HTML là trường văn bản đầu vào và nút B) Mã Javascript
Giải thích mã1. Bây giờ, bằng cách sử dụng javascript, chúng tôi lưu trữ một tham chiếu đến từng phần tử, cụ thể là đầu vào và nút 2. Theo mặc định, trạng thái của nút được bật trong HTML, do đó, bằng cách đặt bị vô hiệu hóa = true, chúng tôi đã tắt nút cho người dùng 3. Sau đó, chúng tôi thêm một trình xử lý sự kiện (addEventListener) vào trường đầu vào với thay đổi thuộc tính sự kiện để theo dõi sự tương tác với các phần tử 4. Ở đây chúng tôi sử dụng thuộc tính thay đổi để theo dõi khi người dùng nhập văn bản bên trong trường nhập liệu và chạy một chức năng tương ứng 5. Hàm chúng ta chạy ở đây được gọi là stateHandle() được kích hoạt mỗi khi có thay đổi về trạng thái của trường nhập liệu 6. Hàm so sánh giá trị của trường nhập (trường văn bản) với một chuỗi rỗng 7. Nếu người dùng chưa nhập bất cứ thứ gì, thì trường văn bản sẽ bằng ( === ) với chuỗi trống và nút sẽ vẫn bị vô hiệu hóa (bị vô hiệu hóa = đúng) 8. Nếu người dùng nhập văn bản vào trường nhập, thì nút sẽ được bật (tắt = sai) Hoàn thành mã
đầu raA) Trạng thái không hoạt độngB) Trạng thái hoạt độngSử dụng jQuery để bật/tắt nút
1. Đối với phương thức jQuery cũng vậy, chúng tôi bắt đầu bằng cách tạo một nút HTML và trường văn bản (submit và tbName tương ứng) và ban đầu đặt nút ở trạng thái bị vô hiệu hóa 2. Ở đây, hàm ready() được sử dụng để cung cấp chức năng sau khi tài liệu đã được tải 3. Các. phương thức on() trong jquery đính kèm trình xử lý sự kiện vào trường đầu vào (tbName) 4. Sự kiện thay đổi sẽ kiểm tra các thay đổi trong trường đầu vào và chạy chức năng tương ứng 5. Giống như trong javascript, nếu trường văn bản trống thì nút vẫn bị tắt, nếu không thì nút sẽ được bật. 6. đây. Phương thức prop() được sử dụng để thay đổi trạng thái của nút Hình dungBạn có thể thử với đoạn mã trên bằng trình chỉnh sửa này và xem phần nào của mã thực hiện chức năng gì. Bạn cũng có thể thử các tùy chọn CSS khác nhau cho nút, v.v. Làm cách nào để vô hiệu hóa nút sau một cú nhấp chuột trong HTML?1. 1 Để tắt nút gửi, bạn chỉ cần thêm thuộc tính bị vô hiệu hóa vào nút gửi . $("#btnGửi"). attr("bị vô hiệu hóa", đúng); . 2 Để bật nút bị vô hiệu hóa, hãy đặt thuộc tính bị vô hiệu hóa thành sai hoặc xóa thuộc tính bị vô hiệu hóa.
Làm cách nào để bật nút tắt trong HTML?Sử dụng Javascript . Vô hiệu hóa tài liệu nút html. getElementById("Nút"). vô hiệu hóa = đúng; Kích hoạt tài liệu nút html. getElementById("Nút"). vô hiệu hóa = sai; Bản trình diễn tại đây Làm cách nào để tắt nút sau một cú nhấp chuột JavaScript?Để tắt một nút chỉ bằng JavaScript, bạn cần đặt thuộc tính bị vô hiệu hóa của nút đó thành false . Ví dụ. thành phần. bị vô hiệu hóa = đúng. Và để bật một nút, chúng tôi sẽ làm ngược lại bằng cách đặt thuộc tính JavaScript bị vô hiệu hóa thành sai.
Làm cách nào để tắt nút trong HTML CSS?Để tạo nút bị vô hiệu hóa, chúng tôi sẽ sử dụng lớp Pure-button-disabled CSS thuần túy với lớp “nút thuần túy”. We can also create a disabled button using disabled attribute. Disabled Button used Class: pure-button-disabled: It is used to disable the Pure CSS button. |