Làm cách nào để tắt nút radio trong HTML?

Thành phần RadioButton 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 Radio, thuộc tính _______________ có thể được đặt thành _______________

Ví dụ sau minh họa cách tắt nút radio và nút chọn được hiển thị bằng cách sử dụng sự kiện

Câu trả lời. Để làm cho nút radio không thể chọn được, trong thẻ INPUT của nút, bạn có thể sử dụng trình xử lý sự kiện onclick như thế này

Trong ví dụ bên dưới, tùy chọn "Chuyển phát nhanh" bị tắt. Hãy thử ngay bây giờ - bạn sẽ nhận được một hộp cảnh báo có nội dung Xin lỗi, tùy chọn này không khả dụng. Phương thức giao hàng (chọn một)
Tải xuống
thư thường
chuyển phát nhanh (tạm thời không khả dụng) Tuy nhiên, xin lưu ý rằng thủ thuật trên sẽ không hoạt động nếu người dùng đã tắt JavaScript. Tuy nhiên, ngay cả khi không dựa vào tập lệnh phía máy khách, bạn vẫn có thể tắt nút radio (cũng như các phần tử biểu mẫu thuộc các loại khác) bằng cách sử dụng thuộc tính disabled trong thẻ HTML xác định phần tử biểu mẫu, chẳng hạn. . Trong hầu hết các trình duyệt, phần tử biểu mẫu bị vô hiệu hóa sẽ chuyển sang màu xám, như thế này. Phương thức giao hàng (chọn một)
Tải xuống
thư thường
chuyển phát nhanh (tạm thời không có)

Nút radio là loại đầu vào nhận đầu vào ở dạng tùy chọn. Người dùng sẽ chọn một giá trị từ nhiều lựa chọn. Chỉ có thể chọn một phương án trong số nhiều phương án có thể

Trong bài viết này, chúng ta sẽ khám phá cách tắt nút radio và cách bật lại nút này khi được yêu cầu. Chúng tôi sẽ xem cách các nút radio hoạt động bên trong và cách chúng tôi có thể tắt chúng khi cần

Hầu hết các nút radio chỉ được hiển thị cho người dùng trong một số trường hợp như một phần xác nhận. Khi không cần thiết, chúng tôi có thể vô hiệu hóa chúng để người dùng không chọn một tùy chọn

Tiếp cận

Theo cách tiếp cận này, chúng tôi sẽ sử dụng thuộc tính bị vô hiệu hóa do HTML cung cấp. Thuộc tính này cho phép bạn tắt bất kỳ phần tử HTML nào. Đây là một thuộc tính có giá trị boolean chỉ có hai giá trị i. e. đúng hay sai. Khi vô hiệu hóa được sử dụng, nó sẽ vô hiệu hóa phần tử HTML cụ thể đó. Giá trị mặc định của bị vô hiệu hóa là sai

Thí dụ

Trong ví dụ dưới đây, chúng tôi đang so sánh một chuỗi với biểu thức regex và trả về chỉ mục của nó nếu chuỗi khớp. Nếu không, -1 sẽ được trả về

# mục lục. html



   
   


   

      Welcome To Tutorials Point      

Do you like sports ?

     

          Yes           No      

     

         If No, Choose your favourite sport.      

     

         Cricket          Football          Basket Ball           Others      

               Submit          

   

đầu ra

Đối với câu hỏi “Bạn có thích thể thao không?”, nếu bạn chọn “Có” thì nút radio không bị tắt nhưng nếu bạn chọn “Không” thì nút radio sẽ bị tắt

Thuộc tính vô hiệu hóa Radio đầu vào HTML DOM được sử dụng để đặt hoặc trả về nếu nút radio có nên bị vô hiệu hóa hay không. Nó sử dụng các giá trị boolean với true đại diện cho phần tử nên bị vô hiệu hóa và sai nếu không. Thuộc tính bị vô hiệu hóa được đặt thành sai theo mặc định. Phần tử bị vô hiệu hóa có màu xám theo mặc định và không thể nhấp được

cú pháp

Sau đây là cú pháp để -

Đặt thuộc tính bị vô hiệu hóa

radioObject.disabled = true|false;

Ở đây, true= nút radio bị tắt và false= nút radio không bị tắt. Nó là sai theo mặc định

Thí dụ

Chúng ta hãy xem một ví dụ cho thuộc tính Vô hiệu hóa radio đầu vào -

Bản thử trực tiếp



Input radio disabled Property

FRUIT:
Mango

Disable the above radio button by clicking on the DISABLE button

DISABLE

đầu ra

Điều này sẽ tạo ra đầu ra sau -

Làm cách nào để tắt nút radio trong HTML?

Khi nhấp vào nút TẮT –

Làm cách nào để tắt nút radio trong HTML?

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử đầu vào bên trong một biểu mẫu với type=”radio”, name=”fruits”, id=”Mango”

FRUIT:
Mango

Sau đó, chúng tôi đã tạo một nút DISABLE sẽ thực thi phương thức disableRadio() khi người dùng nhấp vào -

DISABLE

Phương thức disableRadio() lấy phần tử đầu vào có loại radio bằng phương thức getElementById() và đặt thuộc tính bị vô hiệu hóa của nó thành true. Nút radio này chuyển sang màu xám và người dùng không thể tương tác với nó nữa

Nút radio là loại đầu vào được sử dụng để nhận đầu vào từ người dùng bằng cách chọn một giá trị từ nhiều lựa chọn. Bạn đã xem các nút chọn giới tính giữa nam và nữ. Chúng tôi chỉ chọn một mục, nam hoặc nữ và bỏ chọn các mục khác

Có thể có một số trường hợp khi chúng tôi cần tắt các mục nhập khác dựa trên một số điều kiện. Bạn có thể bật và tắt nút radio bằng cách sử dụng thuộc tính bị vô hiệu hóa của HTML DOM. Đặt thuộc tính này thành true (disable=true) để tắt nút radio trong JavaScript

Vô hiệu hóa nút radio

Đôi khi, chúng ta cần tắt nút radio cho một điều kiện cụ thể. Đây là những điều kiện đặc biệt khi chúng tôi tắt nút radio. Khi các nút radio bị tắt, màu của chúng chuyển sang màu xám

Trong các ví dụ dưới đây, chúng ta sẽ tìm hiểu cách tắt nút radio

Tắt nút radio bằng menu thả xuống

Ở đây, chúng tôi sẽ sử dụng danh sách thả xuống có các giá trị Có và Không để bật hoặc tắt các nút radio. Nếu bạn chọn Không, tất cả các nút radio sẽ bị tắt. Mặt khác, tất cả các nút radio sẽ được bật nếu bạn chọn Có

Lưu ý rằng bạn cũng có thể sử dụng hộp kiểm thay vì danh sách thả xuống

sao chép mã

Kiểm tra nó ngay bây giờ

Đầu ra 1

Bạn sẽ nhận được đầu ra giống như bên dưới bằng cách chạy đoạn mã trên. Tại đây, trước tiên hãy chọn Có hoặc Không từ danh sách thả xuống

Làm cách nào để tắt nút radio trong HTML?

Đầu ra 2

Bằng cách chọn Không từ danh sách thả xuống, tất cả các nút radio sẽ bị tắt và bạn sẽ không được phép chọn bất kỳ ngôn ngữ lập trình nào. Xem ảnh chụp màn hình bên dưới

Làm cách nào để tắt nút radio trong HTML?

Đầu ra 2

Bằng cách chọn Có từ danh sách thả xuống, tất cả các nút radio sẽ được bật lại. Vì vậy, bạn sẽ có thể chọn một ngôn ngữ lập trình. Xem ảnh chụp màn hình bên dưới

Làm cách nào để tắt nút radio trong HTML?

Tắt nút radio bằng hộp kiểm

Bây giờ chúng tôi sẽ sử dụng hộp kiểm để tắt nút radio

sao chép mã

Kiểm tra nó ngay bây giờ

đầu ra

Bạn sẽ nhận được đầu ra giống như bên dưới bằng cách chạy đoạn mã trên. Ở đây, hộp kiểm đã được kiểm tra, bạn chỉ cần chọn một ngôn ngữ lập trình bằng cách nhấp vào nút radio

Làm cách nào để tắt nút radio trong HTML?

Bỏ chọn hộp kiểm nếu bạn không phải là nhà phát triển. Các nút radio sẽ bị vô hiệu hóa bằng cách bỏ chọn hộp kiểm

Làm cách nào để tắt nút radio trong HTML?

Vì vậy, đây là những phương pháp khác nhau để tắt nút radio

Một ví dụ nút radio đơn giản

Đây là một ví dụ đơn giản về nút radio được tạo. Trong ví dụ này, chúng tôi sẽ tạo bộ nút radio để chọn giới tính và ngôn ngữ. Đầu vào sẽ được lấy bằng biểu mẫu HTML và được tính toán bằng JavaScript. Xem mã dưới đây

sao chép mã

Kiểm tra nó ngay bây giờ

đầu ra

Xem ảnh chụp màn hình bên dưới cho nút radio. Tại đây, chọn một giá trị từ mỗi bộ nút radio. Chúng tôi đã chọn giới tính = nữ và ngôn ngữ = tiếng Hin-ddi

Làm cách nào để tắt nút radio trong HTML?

Sau khi chọn các giá trị của nút radio, hãy nhấp vào nút Hiển thị các giá trị đã chọn và bạn sẽ nhận được các giá trị đã chọn đã hiển thị trên web

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

Theo phương pháp này, chúng ta sẽ sử dụng thuộc tính bị vô hiệu hóa do HTML cung cấp . Thuộc tính này cho phép bạn tắt bất kỳ phần tử HTML nào. Đây là một thuộc tính có giá trị boolean chỉ có hai giá trị i. e. đúng hay sai. Khi vô hiệu hóa được sử dụng, nó sẽ vô hiệu hóa phần tử HTML cụ thể đó.

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

Bạn có thể bật và tắt nút radio bằng cách sử dụng thuộc tính bị vô hiệu hóa của HTML DOM . Đặt thuộc tính này thành true (disable=true) để tắt nút radio trong JavaScript.