Tắt nút HTML

Nút bị tắt trong HTML ngăn người dùng nhấp vào nút. Theo mặc định, các nút bị tắt có màu xám. Các nút HTML có thể bị vô hiệu hóa bằng cách sử dụng thuộc tính boolean bị vô hiệu hóa. Tất cả các nút HTML được bật theo mặc định trừ khi được chỉ định

Tại sao các nút bị vô hiệu hóa lại cần thiết?

Nút bị vô hiệu hóa trong HTML là cần thiết trong một số trường hợp khi chúng tôi muốn ngăn người dùng nhấp vào nút để ngăn hành động được thực thi. Dưới đây là một số tình huống khi chúng tôi có thể tắt một nút trong HTML

• Tắt một nút khi biểu mẫu được gửi để ngăn người dùng nhấp lại vào biểu mẫu đó. Ví dụ khi khách hàng bấm đăng nhập và đợi nó hoàn tất
• Vô hiệu hóa một nút cho đến khi người dùng nhập tất cả các chi tiết cần thiết. Ví dụ: điền vào tất cả các chi tiết cần thiết trước khi đăng ký
• Tắt nút khi người dùng không được phép nhấp vào nút đó. Ví dụ: vô hiệu hóa nút xóa đối với người dùng không có quyền truy cập của quản trị viên

cú pháp

Cú pháp HTML để vô hiệu hóa một nút được đưa ra dưới đây

Ngoài ra, các nút HTML có thể được tắt/bật bằng cú pháp JavaScript bên dưới

document.querySelector["selector"].disabled = false; // Enables a button

  

ví dụ
Hãy tạo một biểu mẫu đăng ký chấp nhận tên, email và mật khẩu. Chúng ta nên tắt nút đăng ký cho đến khi người dùng nhập tất cả các chi tiết. Chúng tôi sẽ tắt và bật nút thông qua HTML và JavaScript

    
    
        
            
            
            
            Signup
        
    

CSS
form {
    width: 500px;
    position: relative;
    left: 38%;
    top: 30%;
}

input {
    display: block;
    margin-bottom: 20px;
    border: solid 1px grey;
    padding-left: 15px;
}

input:focus {
    box-shadow: none;
    outline: none;
    border: solid 2px #967ADA;
}

button {
    background-color: white;
}

input, button {
    width: 500px;
    height: 50px;
    border-radius: 5px;
    font-size: 20px;
}
JavaScript
var signupButton = document.querySelector["#signup-button"];
var nameField = document.querySelector["#name"];
var emailField = document.querySelector["#email"];
var passwordField = document.querySelector["#password"];

function validate[] {
    signupButton.disabled = nameField.value.length == 0 
        || emailField.value.length == 0 
        || passwordField.value.length == 0;
}
đầu ra
Chúng tôi đã tắt nút theo mặc định thông qua thuộc tính HTML. Sau đó, chúng tôi đã kiểm soát logic bật và tắt trong JavaScript. Bất cứ khi nào người dùng nhập một số giá trị vào trường đầu vào, nó sẽ gọi phương thức xác thực [] để kiểm tra xem tất cả các giá trị đã được nhập chưa. Nếu có, nút đã được bật; 
ARIA để giải cứu
ARIA, Ứng dụng Internet phong phú có thể truy cập là tập hợp các thuộc tính mà chúng tôi có thể thêm vào phần tử HTML để làm cho ứng dụng web có thể truy cập được đối với người dùng khuyết tật sử dụng các công nghệ hỗ trợ như trình đọc màn hình
Khi một nút bị vô hiệu hóa thông qua thuộc tính bị vô hiệu hóa, trình đọc màn hình biết rằng các nút bị vô hiệu hóa và thông báo cho người dùng. Nhưng các nút HTML cũng có thể bị tắt thông qua javascript và trình đọc màn hình không biết rằng nút này đã bị tắt. Trong những tình huống như vậy, chúng ta có thể thêm thuộc tính aria-disable="true" vào phần tử nút để cho trình đọc màn hình biết rằng thuộc tính đó đã bị tắt
Ví dụ
Nút bị tắt bằng JavaScript và thuộc tính aria-disabled="true" được thêm vào phần tử nút để cho các công nghệ hỗ trợ biết rằng nút đã bị tắt
HTML

  

SUBMIT
JavaScript
document.querySelector["#submit-button"].disabled = true;
Sự khác biệt giữa bị vô hiệu hóa và bị vô hiệu hóa ARIA trong HTML
Đã tắt Đã tắt ARIA Đã tắt một nút và ngăn người dùng nhấp vào nút đó Không tắt một nút. Chỉ cần một thuộc tính cho biết nút bị vô hiệu hóa. Nút phải được tắt thông qua JavaScriptKhông đặt tiêu điểm cho nút khi phím tab được sử dụng để điều hướng qua các phần tử Nút được đặt tiêu điểm khi các phần tử được điều hướng bằng phím tab
Trình duyệt được hỗ trợ
Các thuộc tính bị vô hiệu hóa và bị vô hiệu hóa aria được hỗ trợ bởi tất cả các trình duyệt chính như Chrome, Internet Explorer, Edge, Firefox, Safari, Opera, v.v.
 
Vì bạn đang tắt nó ngay từ đầu nên cách để kích hoạt nó là đặt thuộc tính disabled của nó là 

    
    
        
            
            
            
            Signup
        
    

0

  

Để thay đổi thuộc tính disabled của nó trong Javascript, bạn sử dụng cái này
var btn = document.getElementById["Button"];
btn.disabled = false;
Và rõ ràng là để vô hiệu hóa nó một lần nữa, thay vào đó bạn sẽ sử dụng 

    
    
        
            
            
            
            Signup
        
    

2
Vì bạn cũng đã gắn thẻ câu hỏi bằng jQuery, nên bạn có thể sử dụng phương pháp 

    
    
        
            
            
            
            Signup
        
    

3. Cái gì đó như
var btn = $["#Button"];
btn.prop["disabled", true];   // Or `false`
Đây là phiên bản mới hơn của jQuery. Cách cũ hơn để làm điều này là thêm hoặc xóa một thuộc tính như vậy
________số 8
Sự hiện diện đơn thuần của thuộc tính disabled sẽ vô hiệu hóa phần tử, vì vậy bạn không thể đặt giá trị của nó là "false". Ngay cả những điều sau đây cũng nên vô hiệu hóa phần tử
 

			
Làm cách nào để bật nút tắt trong HTML?
			
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 để tắt nút trong HTML CSS?
			
Để tạo nút bị vô hiệu hóa, chúng tôi sẽ  sử dụng lớp Pure-button-disabled CSS thuần túy với lớp “nút thuần túy”. We can also create a disabled button using disabled attribute. Disabled Button used Class: pure-button-disabled: It is used to disable the Pure CSS button.
		
			
Làm cách nào để tắt một nút trong HTML bằng JavaScript?
			
Để tắt một nút chỉ bằng JavaScript, bạn cần  đặt thuộc tính bị vô hiệu hóa của nút đó thành false . Ví dụ. thành phần. bị vô hiệu hóa = đúng. 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 bị vô hiệu hóa thành sai. 
		
			
Làm cách nào để tắt nút trong HTML sau một cú nhấp chuột?
			
Xóa sự kiện nhấp chuột của nút
 . Bạn có thể chỉ cần  xóa trình xử lý sự kiện  title bằng cách đặt giá trị của nó là null .