Cách tắt nút sau một cú nhấp chuột trong JavaScript

Hướng dẫn này sẽ giải thích phương pháp bật và tắt các nút với sự trợ giúp của JavaScript và jQuery

Nội dung chính Show

• Làm cách nào để Tắt hoặc Bật các Nút bằng JavaScript và jQuery?
• Phần kết luận
• Làm cách nào để tắt nút sau khi được nhấp trong JavaScript?
• Làm cách nào để tắt một nút trong JavaScript?
• Làm cách nào để tắt một nút trong JavaScript dựa trên điều kiện?

Làm cách nào để Tắt hoặc Bật các Nút bằng JavaScript và jQuery?

Một trong những điều thiết thực nhất mà mỗi ứng dụng web bao gồm trong các nút của nó là các chức năng bật và tắt. Bạn có thể sử dụng thuộc tính “disabled” để bật hoặc tắt các nút trong jQuery và JavaScript

ví dụ 1. Vô hiệu hóa hoặc kích hoạt các nút bằng JavaScript
Trong tệp HTML, trước tiên chúng ta sẽ tạo ba nút, nút sẽ thực hiện các hành động, một nút dùng để tắt và nút còn lại dùng để bật nút

< id nút ="nút"><Buttonbutton>
< nhấp vào nút ="disableButton()">Click to Disablebutton>
< nhấp vào nút ="enableButton()">Click to Enablebutton>

Chúng ta sẽ định nghĩa hàm “disableButton()” để vô hiệu hóa nút bằng cách đặt giá trị của thuộc tính bị vô hiệu hóa thành “true”

chức năng nút tắt () {
 tài liệu. getElementById("nút").đã tắt = true;
}

Để bật nút, hãy đặt giá trị thuộc tính bị vô hiệu hóa thành “false”

chức năng enableButton () {
 tài liệu. getElementById("nút").đã tắt = false;
}

Đầu ra tương ứng như sau

ví dụ 2. Vô hiệu hóa hoặc kích hoạt các nút bằng jQuery
Trong ví dụ này, chúng tôi sẽ sử dụng jQuery để tắt và bật nút. Để làm như vậy, trước tiên, hãy tạo hai nút trong tệp HTML. Một trong số chúng được sử dụng để tắt và bật nút còn lại

< id nút ="nút"><Buttonbutton>
< id nút ="chuyển đổi"><Click Here to Disable and for Enable double click on itbutton>

For using jQuery, specify it the “src” attribute in tag:

< script src ="https. // ajax. googleapis. com/ajax/libs/jquery/1. 10. 2/jquery. tối thiểu. js"> tập lệnh >

In the

$ ( tài liệu ) . sẵn sàng(chức năng () {
 $ ('#toggle') . bật('nhấp chuột', function () {
  $ ('#button') . prop('disabled', true);
  });
 $ ('#toggle') . bật('dblclick', function () {
  $ ('#button') . prop('disabled', false);
  });
});

Đầu ra biểu thị rằng chúng tôi đã tắt và bật thành công nút bằng jQuery

ví dụ 3. Kích hoạt nút bị vô hiệu hóa bằng JavaScript
Bây giờ, chúng tôi sẽ bật nút bị vô hiệu hóa sau khi nhập một số văn bản vào trường văn bản bằng JavaScript. Đối với điều này, hãy tạo một trường nhập liệu và một nút gửi với id là “văn bản” và “gửi”. Nút gửi bị tắt theo mặc định bằng cách sử dụng thuộc tính bị vô hiệu hóa

< loại đầu vào ="văn bản" id< ="Text" placeholder="Enter Text"/>
< loại đầu vào ="gửi" id< ="submit" disabled="disabled" />

Trong tệp JavaScript, trước tiên chúng ta sẽ lấy id của trường đầu vào và nút, sau đó gọi hàm “stateHandle” trong phương thức “addEventListener”, trong đó chúng ta sẽ đặt giá trị của thuộc tính bị vô hiệu hóa thành “false” nếu trường văn bản là

cho phép nhập tài liệu = . Bộ chọn truy vấn("#Văn bản");
nút cho phép = tài liệu. Bộ chọn truy vấn("#submit");
đầu vào. addEventListener("thay đổi", stateHandle);
function stateHandle () {
  nếu ( tài liệu. Bộ chọn truy vấn("#Văn bản").giá trị . ="") {
  nút. đã tắt = sai;
  }
  khác {
  nút. đã tắt = true;
  }
}

đầu ra

Ví dụ 4. Kích hoạt các nút nút bị vô hiệu hóa bằng jQuery
Trong ví dụ này, chúng tôi sẽ sử dụng jQuery để bật nút gửi bị vô hiệu hóa. Để làm như vậy, trước tiên hãy đặt giá trị của thuộc tính bị vô hiệu hóa thành “false” để vô hiệu hóa nút trong khi trường nhập liệu trống. Sau đó, nếu trường chứa bất kỳ văn bản nào, hãy đặt giá trị của thuộc tính bị vô hiệu hóa thành “true”, điều này sẽ bật nút gửi

$ ( tài liệu ) . sẵn sàng(chức năng () {
 $ ('#Văn bản') . bật('thay đổi đầu vào', function () {
  nếu ( $ (this).val() . = '') {
   $ ('#submit') . prop('disabled', false);
  }
  khác {
   $ ('#submit') . prop('disabled', true);
    }
  });
});

Đầu ra tương ứng được hiển thị bên dưới

Chúng tôi đã đề cập đến tất cả các khía cạnh của nút bật và tắt bằng JavaScript và jQuery

Phần kết luận

Để bật và tắt nút trong JavaScript và jQuery, bạn có thể sử dụng thuộc tính “đã tắt”. Để làm như vậy, hãy đặt giá trị của thuộc tính bị vô hiệu hóa “true” hoặc “false” để tắt hoặc bật nút tương ứng. Trong hướng dẫn này, chúng tôi đã giải thích phương pháp bật và tắt các nút với sự trợ giúp của JavaScript và jQuery

Làm cách nào để tắt nút sau khi được nhấp trong JavaScript?

Làm cách nào để tắt một nút trong JavaScript?

Làm cách nào để tắt một nút trong JavaScript dựa trên điều kiện?