HTML DOM Input Radio thuộc tính bị vô hiệu hóa

Thuộc tính vô hiệu hóa HTML DOM Input Radio được sử dụng để thiết lập hoặc quay lại xem 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à ngược lại là false. Thuộc tính bị vô hiệu hóa được đặt thành false 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 vào đượ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.

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ về thuộc tính Vô hiệu hóa vô tuyến đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input radio disabled Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>Disable the above radio button by clicking on the DISABLE button</p>
<button type="button" onclick="disableRadio()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableRadio() {
      document.getElementById("Mango").disabled=true;
      document.getElementById("Sample").innerHTML = "The radio button is now disabled" ;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Input Radio thuộc tính bị vô hiệu hóa

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

HTML DOM Input Radio thuộc tính bị vô hiệu hóa

Trong ví dụ trên -

Đầu 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 có type =”radio”, name =”fruit”, id =”Mango”.

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

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 -

<button type=”button” onclick="disableRadio()">DISABLE</button>

Phương thức disableRadio () nhận phần tử đầu vào có kiểu radio bằng cách sử dụng phương thức getElementById () và đặt thuộc tính bị vô hiệu hóa của nó thành true. Điều này sẽ làm mờ nút radio và người dùng không còn có thể tương tác với nó nữa:

function disableRadio() {
   document.getElementById("Mango").disabled=true;
   document.getElementById("Sample").innerHTML = "The radio button is now disabled" ;
}