📅 最后修改于: 2023-12-03 14:56:32.665000 🧑 作者: Mango
在网页开发中，有时我们需要禁用单选按钮来防止用户对其进行选择操作。本文将介绍如何用 Javascript 禁用单选按钮。
在 HTML 中，单选按钮的标签为 <input type="radio">。我们可以通过设置它的 disabled 属性为 true 来禁用它。
例如，下面是一个包含两个单选按钮的 HTML 代码：
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">Apple</label>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">Banana</label>
其中，name 属性指定了单选按钮所属的选项组，value 属性指定了单选按钮的值，id 属性用于在标签中引用该单选按钮，for 属性用于将 label 绑定到对应的 input。
禁用单选按钮的关键是通过 Javascript 获取单选按钮元素，然后设置其 disabled 属性为 true。
例如，下面的代码将禁用 id 为 apple 的单选按钮：
document.getElementById('apple').disabled = true;
我们可以将其封装成一个函数：
function disableRadioButton(id) {
document.getElementById(id).disabled = true;
}
这样，我们就可以在需要禁用单选按钮的地方调用这个函数了。
下面是一个实际的示例，在点击按钮时禁用指定的单选按钮：
<!DOCTYPE html>
<html>
<head>
<title>禁用单选按钮 - Javascript</title>
</head>
<body>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">Apple</label>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">Banana</label>
<br><br>
<button onclick="disableRadioButton('apple')">禁用 Apple</button>
<button onclick="disableRadioButton('banana')">禁用 Banana</button>
<script>
function disableRadioButton(id) {
document.getElementById(id).disabled = true;
}
</script>
</body>
</html>
以上代码演示了如何在点击按钮时禁用指定的单选按钮。