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
Có thể bạn quan tâm
Hội chợ nội thất Cologne 2023 bị hủy
Kích thước bình xăng Jeep Wrangler 2023
Khi nào là năm 2023 ăn chay?
Khi nào đăng ký cho trường trung học 2023 đến 2024 ở Tijuana Baja California?
Rằm tháng 3 năm 2023 là ngày nào?



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  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);