Làm cách nào để kích hoạt nút bị vô hiệu hóa trong JavaScript?

Phần tử nút là một trong số ít phần tử trong HTML có thể có trạng thái của nó, đó là. e. , được bật để chấp nhận nhấp chuột hoặc có thể bị tắt

Nội dung chính Show

Chương trình vô hiệu hóa một nút bằng cách sử dụng thuộc tính nút vô hiệu hóa Javascript
Ví dụ về Nút Tắt JavaScript
Ví dụ 1 - Triển khai cơ bản thuộc tính Nút tắt Javascript
Ví dụ 2 - Triển khai Thuộc tính nút Tắt Javascript thành Phần tử biểu mẫu thực tế
Phương thức getElementById()
Thuộc tính bị vô hiệu hóa HTML
Mã JavaScript
Làm cách nào để bật nút bị vô hiệu hóa trong js?
Làm cách nào để bật nút onclick trong JavaScript?
Làm cách nào để thêm thuộc tính bị vô hiệu hóa trong JavaScript?
Làm cách nào để kiểm tra nút có bị tắt hay không trong JavaScript?

Ví dụ: Giả sử chúng tôi đang yêu cầu người dùng điền vào biểu mẫu trên trang web của mình và chúng tôi chỉ muốn bật nút gửi khi người dùng đã nhấp vào tùy chọn 'Họ đã đọc các điều khoản và điều kiện' hoặc họ đã điền một số . Vì vậy, để làm điều đó, chúng tôi có một thuộc tính cụ thể được liên kết với mọi thành phần nút trong HTML, thuộc tính bị vô hiệu hóa. Chúng tôi có thể sử dụng thuộc tính bị vô hiệu hóa để chuyển trạng thái hoạt động của nút thành đúng hoặc sai và thông qua đó, chúng tôi có thể bật hoặc tắt nút

Hãy hiểu nó tốt hơn với sự giúp đỡ của một ví dụ

Chương trình vô hiệu hóa một nút bằng cách sử dụng thuộc tính nút vô hiệu hóa Javascript

Thuộc tính bị vô hiệu hóa trong JavaScript là thuộc tính được liên kết với mọi phần tử nút và để làm cho nó hoạt động, trước tiên chúng ta cần nắm bắt nút cụ thể mà chúng ta muốn nhắm mục tiêu thông qua querySelector, phương thức getElementById, phương thức getElementByClassName, getElementByTagName

const button1 = document.getElementById("button"); // assuming the button is assigned an id named "button"


Sau khi có nút, bây giờ chúng ta có thể sử dụng thuộc tính bị vô hiệu hóa để làm cho trạng thái của nó hoạt động hoặc không hoạt động. Để làm cho nó không hoạt động, chúng ta có thể đặt giá trị của nó thành true
Và để làm cho nó hoạt động trở lại, chúng ta chỉ cần đặt giá trị của nó thành false
Chúng tôi sẽ không mã hóa cứng việc bật hoặc tắt các nút như thế này trong các chương trình thực tế; 
Bây giờ hãy xem một ví dụ để hiểu rõ hơn

Ví dụ về Nút Tắt JavaScript

Ví dụ 1 - Triển khai cơ bản thuộc tính Nút tắt Javascript

 Document Submit


Đầu ra trước khi nhấp vào nút

Làm cách nào để kích hoạt nút bị vô hiệu hóa trong JavaScript?


Đầu ra sau khi nhấp vào nút


Chúng ta có thể thấy rằng sau khi nhấp vào nút, hàm disableButton() đã được thực thi và nó làm cho nền của nút chuyển sang màu xám, nghĩa là hiện tại nút không thể nhấp được, tôi. e. , nút này hiện đã bị vô hiệu hóa

Ví dụ 2 - Triển khai Thuộc tính nút Tắt Javascript thành Phần tử biểu mẫu thực tế

 Document 
 Name 

 
 Email 

 
 I have read terms and conditions 

 Submit


Đầu ra trước khi chọn hộp kiểm


Đầu ra sau khi chọn hộp kiểm


Chúng ta có thể thấy ở đây, nút gửi bị tắt theo mặc định và nút này chỉ có thể nhấp được sau khi người dùng đã chọn hộp kiểm bắt buộc

 
Thành phần nút có thể được bật/tắt bằng cách cung cấp thuộc tính. Để tắt thành phần Nút, thuộc tính disabled có thể được đặt thành true
Ví dụ sau minh họa Nút ở trạng thái disabled

ej.base.enableRipple(true); var button = new ej.buttons.Button({content:'Disabled', disabled: true}, '#custombtn');

 EJ2 Button




Vui lòng cung cấp thêm thông tin
Vui lòng cung cấp thêm thông tin
Vui lòng cung cấp thêm thông tin
Vui lòng cung cấp thêm thông tin
Vui lòng cung cấp thêm thông tin
Vui lòng cung cấp thêm thông tin


Cảm ơn bạn đã phản hồi và nhận xét của bạn. Chúng tôi sẽ khắc phục điều này càng sớm càng tốt

 
Trong hướng dẫn này, chúng ta sẽ xem cách Bật và Tắt Nút bằng JavaScript. Thuộc tính bị vô hiệu hóa HTML và Phương thức getElementById() được sử dụng cho mục đích này

Mục lục

Mã HTML


Mã HTML được đưa ra bên dưới, Mã này chứa ba nút. Một là nút chính và hai nút còn lại được sử dụng để Bật và Tắt nút này________số 8_______

Phương thức getElementById()


Phương thức getElementById() được sử dụng để chọn hoặc nhắm mục tiêu phần tử HTML với giá trị được chỉ định của thuộc tính Id
Trong ví dụ này, id của nút chính là 'btn', ID này được sử dụng để nhắm mục tiêu hoặc chọn nút chính
Phương thức getElementById() được hỗ trợ bởi tất cả các trình duyệt chính

Thuộc tính bị vô hiệu hóa HTML


Thuộc tính bị vô hiệu hóa HTML được sử dụng để vô hiệu hóa hoặc kích hoạt các phần tử html
Thuộc tính bị vô hiệu hóa HTML là một thuộc tính Boolean. Thuộc tính vô hiệu hóa được đặt thành đúng để tắt phần tử html và nó được đặt thành sai để bật phần tử html

Mã JavaScript


Trong ví dụ này, phương thức getElementById được sử dụng để chọn nút chính. sự kiện onclick được sử dụng để kích hoạt cả hai hàm enable() và disable()
thuộc tính bị vô hiệu hóa được đặt thành đúng trong một chức năng sẽ tắt nút chính của chúng tôi và nó được đặt thành sai trong chức năng khác sẽ kích hoạt nút chính của chúng tôi

Làm cách nào để bật nút bị vô hiệu hóa trong js?

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 để bật nút onclick trong JavaScript?

A) HTML. Add the following HTML Code to your editor //defining button and input field .

Giải thích mã. .

B) Mã Javascript. .

Giải thích mã. .

Hoàn thành mã. .

đầu ra. .

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

Làm cách nào để thêm thuộc tính bị vô hiệu hóa trong JavaScript?

Làm cách nào để Đặt Thuộc tính “đã tắt” trong JavaScript? . Phương thức setAttribute() gán một giá trị cụ thể cho một thuộc tính. Phương pháp này có thể được áp dụng để gán cho một phần tử một thuộc tính cụ thể. with the help of the “setAttribute()” method. The setAttribute() method assigns a particular value to an attribute. This method can be applied to assign an element a particular attribute.

Làm cách nào để kiểm tra nút có bị tắt hay không trong JavaScript?

Giải pháp 1. $('#follow'). prop('disabled',true);

programming javascript

Làm cách nào để kích hoạt nút bị vô hiệu hóa trong JavaScript?

Chương trình vô hiệu hóa một nút bằng cách sử dụng thuộc tính nút vô hiệu hóa Javascript

Ví dụ về Nút Tắt JavaScript

Ví dụ 1 - Triển khai cơ bản thuộc tính Nút tắt Javascript

Ví dụ 2 - Triển khai Thuộc tính nút Tắt Javascript thành Phần tử biểu mẫu thực tế

Mã HTML

Phương thức getElementById()

Thuộc tính bị vô hiệu hóa HTML

Mã JavaScript

Làm cách nào để bật nút bị vô hiệu hóa trong js?

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

Làm cách nào để thêm thuộc tính bị vô hiệu hóa trong JavaScript?

Làm cách nào để kiểm tra nút có bị tắt hay không trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội