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

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

Đầ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 title đượ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 title trong JavaScript?

A] HTML. Add the following HTML Code to your editor //defining button and input field Click Me.
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];

Chủ Đề