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 disabled của nó thành false. Ví dụ. ________số 8

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 disabled thành false

Đâ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 disabled thành false

Thuộc tính disabled phản ánh thuộc tính HTML disabled 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ó

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ật
• Triển khai mã bằng Javascript và jQuery
• Hình dung

Giới thiệu về nút tắt/bật

Thô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

• Đặt nút về trạng thái bị vô hiệu hóa ngay từ đầu
• Nếu giá trị đầu vào của trường bắt buộc trống, hãy để nút vẫn bị tắt. [Trạng thái bị tắt = TRUE]
• Nếu giá trị đầu vào của trường bắt buộc không trống, hãy thay đổi trạng thái của nút thành đã bật. [Hoặc đặt trạng thái vô hiệu hóa = FALSE]

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út

1. Sử dụng Javascript

MỘT] HTML

Thêm mã HTML sau vào trình chỉnh sửa của bạn

//defining button and input field

Click Me

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

//Program to disable or enable a button using javascript

    let input = document.querySelector[".input"];
let button = document.querySelector[".button"];

button.disabled = true; //setting button state to disabled

input.addEventListener["change", stateHandle];

function stateHandle[] {
    if [document.querySelector[".input"].value === ""] {
        button.disabled = true; //button remains disabled
    } else {
        button.disabled = false; //button is enabled
    }
}

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ã

    
    Click Me


let input = document.querySelector[".input"];
let button = document.querySelector[".button"];
button.disabled = true;
input.addEventListener["change", stateHandle];

function stateHandle[] {
    if[document.querySelector[".input"].value === ""] {
        button.disabled = true;
    } else {
        button.disabled = false;
    }
}

đầu ra

A] Trạng thái không hoạt độngNút bị tắt vì trường văn bản trốngB] Trạng thái hoạt độngNút được bật vì trường văn bản không trống

Sử dụng jQuery để bật/tắt nút

    jQuery - Enable or Disable Button
    


 Name:
    
     

$[document].ready[function[] {
    $['#tbName'].on['input change', function[] {
        if[$[this].val[] != ''] {
            $['#submit'].prop['disabled', false];
        } else {
            $['#submit'].prop['disabled', true];
        }
    }];
}];

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 dung

Bạ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?

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

Làm cách nào để tắt nút sau một cú nhấp chuột JavaScript?

Làm cách nào để tắt nút trong HTML CSS?