Cách kích hoạt một nút trong JavaScript

Trong đoạn trích này, chúng ta sẽ khám phá phương thức

Submit

Submit

Submit

Trạng thái sẽ thay đổi từ bị vô hiệu hóa (mặc định) sang được kích hoạt bất cứ khi nào người dùng nhập nội dung nào đó vào trường nhập liệu. Như vậy, bạn có thể sử dụng phương pháp này để ngăn người dùng gửi biểu mẫu chưa được điền đầy đủ. Điều này cũng thường được gọi là "các trường bắt buộc"

Bây giờ, trường hợp sử dụng cho điều này là trên cơ sở từng trường hợp. Ví dụ: nếu bạn viết một trường nhập email và thêm bắt buộc vào trường đó, người dùng có thể nhấp vào nút, nhưng nó sẽ không gửi email thực cho đến khi biểu mẫu được điền chính xác. Đọc thêm về điều này trên MDN

Hãy xem một số mã, một ví dụ và nói về những gì đang xảy ra

CSSHTMLJavaScript

.form-style {
  display: flex;
  place-content: center;
  padding: 1rem;
  background-color: #f5f2f0;
}

.form-button {
  margin-left: 10px;
}

Submit

const formInput = document.querySelector(".form-input");
const formButton = document.querySelector(".form-button");

// the default state is 'disabled'
formButton.disabled = true; 

// alternative is to use "change" - explained below
formInput.addEventListener("keyup", buttonState);

function buttonState() {
    if (document.querySelector(".form-input").value === "") {
        formButton.disabled = true; // return disabled as true whenever the input field is empty
    } else {
        formButton.disabled = false; // enable the button once the input field has content
    }
}

// just verifying that the button has been clicked
formButton.addEventListener("click", () => {
console.log("You entered:", document.querySelector(".form-input").value);
});

Và đây là một hình thức demo để giới thiệu kết quả cuối cùng

Nộp

Điều đầu tiên cần lưu ý ở đây là trạng thái nút thay đổi ngay sau khi bạn nhập một số văn bản

Điều này là do đối với bản demo này, chúng tôi đang sử dụng trình lắng nghe sự kiện

Submit

Submit

Khi sử dụng

Submit

Submit

Bạn cũng có thể xác minh rằng nút này hoạt động bằng cách kiểm tra

Submit

Để tắt một nút chỉ bằng JavaScript, bạn cần đặt thuộc tính

Submit

Submit

Submit

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

Submit

Submit

Đâ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ó

// Disabling a button
document.querySelector('#button').disabled = true;

// Enabling a disabled button to enable it again
document.querySelector('#button').disabled = false;

Đây là những bước chúng ta phải làm theo

1. Truy vấn nút bạn muốn tắt
2. Đặt thuộc tính

   
   
   Submit
   

   44 thành

   
   
   Submit
   

   45

Thuộc tính

Submit

44 phản ánh thuộc tính HTML

Submit

44 và cung cấp một cách để thay đổi thuộc tính này một cách linh hoạt bằng JavaScript

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ó

Trong bài viết này, chúng tôi sẽ thảo luận về cách bạn có thể bật hoặc tắt một nút bằng JavaScript. Đầu tiên, chúng ta sẽ tìm hiểu cách nó hoạt động trong vanilla JavaScript và sau đó chúng ta sẽ xem cách thực hiện với jQuery

JavaScript là một trong những công nghệ cốt lõi của web. Phần lớn các trang web sử dụng nó và tất cả các trình duyệt web hiện đại đều hỗ trợ nó mà không cần plugin. Trong loạt bài này, chúng ta sẽ thảo luận về các mẹo và thủ thuật khác nhau sẽ giúp bạn phát triển JavaScript hàng ngày

Khi bạn đang làm việc với JavaScript, thường thì bạn cần phải bật hoặc tắt một nút dựa trên một số hành động. Thông thường, khi làm việc với biểu mẫu, bạn muốn tắt nút gửi cho đến khi người dùng điền vào tất cả các trường bắt buộc trong biểu mẫu. Khi người dùng điền vào tất cả các trường bắt buộc, bạn muốn tự động kích hoạt nó để người dùng có thể nhấp vào nút để gửi biểu mẫu

Trong HTML, một phần tử nút có trạng thái riêng và do đó, bạn có thể bật hoặc tắt nó. Ví dụ: khi một biểu mẫu được tải, bạn có thể giữ một nút ở trạng thái tắt. Sau này, bạn có thể kích hoạt nó với sự trợ giúp của JavaScript

Hôm nay, chúng ta sẽ thảo luận về cách bạn có thể bật hoặc tắt nút bằng JavaScript với một số ví dụ thực tế

Kích hoạt hoặc vô hiệu hóa một nút với Vanilla JavaScript

Trong phần này, chúng ta sẽ thảo luận về một ví dụ thực tế, minh họa cách bạn có thể bật hoặc tắt một nút bằng vanilla JavaScript

Hãy xem qua ví dụ sau

1

2

Submit

Submit

Submit

Submit

Submit

Submit

2

2

2

2

2

2

2

2

2

2

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Trong ví dụ trên, chúng tôi đã tạo một biểu mẫu rất đơn giản có một vài trường văn bản cùng với nút gửi. Điều quan trọng cần lưu ý là khi một biểu mẫu được tải, nút gửi sẽ ở trạng thái bị vô hiệu hóa. Chúng tôi đã sử dụng thuộc tính

Tiếp theo, chúng tôi đã xác định sự kiện

Trong ví dụ trên, chúng tôi đã sử dụng nút gửi đầu vào, nhưng bạn cũng có thể sử dụng nút HTML như trong ví dụ sau

1

Submit

Vì vậy, đó là cách bạn có thể sử dụng vanilla JavaScript để bật hoặc tắt một nút. Trong phần tiếp theo, chúng ta sẽ xem cách bạn có thể sử dụng thư viện jQuery

Kích hoạt hoặc vô hiệu hóa một nút với jQuery

Trong phần này, chúng ta sẽ thảo luận về cách bạn có thể chuyển đổi trạng thái của một nút với sự trợ giúp của thư viện jQuery

Hãy sửa lại ví dụ mà chúng ta đã thảo luận trong phần trước

1

2

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

2

Submit

2

Submit

2

2

2

Submit

2

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Submit

Trước hết, chúng tôi đã tải thư viện jQuery để chúng tôi có thể sử dụng nó trong chức năng của mình. Sự khác biệt duy nhất trong ví dụ trên là chúng tôi đã sử dụng phương thức

Phương thức

Nếu bạn đang sử dụng jQuery 1. 5+, bạn sẽ cần sử dụng phương thức

1

2

Ngoài ra, nếu bạn muốn xóa bất kỳ thuộc tính nào của phần tử, bạn cũng có thể sử dụng phương thức

1

2

Vì vậy, đây là những cách khác nhau mà bạn có thể sử dụng jQuery để bật hoặc tắt một nút

Phần kết luận

Hôm nay, chúng ta đã thảo luận về cách bạn có thể bật hoặc tắt một nút trong JavaScript bằng một số ví dụ thực tế. Cùng với vanilla JavaScript, chúng tôi cũng đã thảo luận cách đạt được nó với sự trợ giúp của thư viện jQuery

Làm cách nào để bật một nút JavaScript?

Làm cách nào để bật nút onclick trong JavaScript?

Làm cách nào để bật nút trong JavaScript dựa trên điều kiện?

Làm cách nào để kích hoạt nút trong HTML?