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
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ànhtrue
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 đâyLà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útLà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];