将选中的单选按钮设置为只读

在一个表单中，单选按钮通常用于提供多个选项中的一个选项。有时，我们需要将已选中的单选按钮设置为只读，这样用户就不能再更改它们的状态了。下面是使用 JavaScript 将选中的单选按钮设置为只读的示例代码：

// 获取所有单选按钮元素
var radios = document.querySelectorAll('input[type="radio"]');

// 遍历每个单选按钮
radios.forEach(function(radio) {
    // 如果单选按钮是选中状态，则设置其为只读
    if (radio.checked) {
        radio.setAttribute('readonly', 'readonly');
    }
});

代码解释：

1. 首先，我们使用 document.querySelectorAll() 方法获取所有的单选按钮元素。这里使用了 CSS 选择器来匹配所有的 type 属性值为 radio 的 input 元素。

2. 接下来，我们使用 forEach() 方法遍历每个单选按钮。forEach() 方法是可用于所有数组的方法，在 JavaScript 中，NodeList 实例（例如 querySelectorAll() 返回的值）也是类数组对象，它们具有类似于数组的结构，因此也可以使用 forEach() 方法。

3. 对于每个单选按钮，我们检查其状态是否为选中。如果是，则使用 setAttribute() 方法为其添加 readonly 属性，这样它就被设置为只读了。

需要注意的是，单选按钮只有在表单提交时才会在服务器端被处理。如果你想在客户端验证单选按钮值，需要使用 JavaScript 和 CSS 来完成。

以上就是关于将选中的单选按钮设置为只读的介绍。通过使用上述代码，你可以控制单选按钮的状态，并防止用户更改它们的状态。