Thuộc tính disabled của Input Radio trong HTML DOM

Thuộc tính disabled của HTML DOM Input Radio được sử dụng để thiết lập hoặc trả về xem nút radio có bị vô hiệu hóa hay không. Sử dụng giá trị boolean: true biểu thị phần tử bị vô hiệu hóa, false ngược lại. Mặc định disabled là false. Phần tử bị vô hiệu hóa mặc định hiển thị màu xám và không thể click.

Cú pháp

Cú pháp để thiết lập thuộc tính disabled:

radioObject.disabled = true|false;

Ở đây, true= nút radio bị vô hiệu hóa, false= nút radio không bị vô hiệu hóa. Mặc định là false.

Ví dụ

Ví dụ minh họa cho thuộc tính disabled của Input Radio:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính disabled của Input Radio</h1> 
<form> 
TRÁI CÂY: <input type="radio" name="fruits" id="Mango">Xoài </form> 
<p>Vô hiệu hóa nút radio trên bằng cách nhấn nút VÔ HIỆU HÓA</p> 
<button type="button" onclick="disableRadio()">VÔ HIỆU HÓA</button> 
<p id="Sample"></p> 
<script> 
    function disableRadio() { 
        document.getElementById("Mango").disabled=true; 
        document.getElementById("Sample").innerHTML = "Nút radio hiện đã bị vô hiệu hóa" ; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút VÔ HIỆU HÓA:

Trong ví dụ trên:

Chúng ta tạo phần tử input trong form với type="radio", name="fruits", id="Mango":

<form> TRÁI CÂY: <input type="radio" name="fruits" id="Mango">Xoài </form>

Tạo nút VÔ HIỆU HÓA thực thi phương thức disableRadio() khi được nhấn:

<button type="button" onclick="disableRadio()">VÔ HIỆU HÓA</button>

Phương thức disableRadio() lấy phần tử radio bằng getElementById() và thiết lập thuộc tính disabled thành true. Điều này làm nút radio chuyển sang màu xám và người dùng không thể tương tác:

function disableRadio() { 
    document.getElementById("Mango").disabled=true; 
    document.getElementById("Sample").innerHTML = "Nút radio hiện đã bị vô hiệu hóa" ; 
}