js设置radio选中不可变

在JavaScript中，要设置一个radio（单选按钮）为选中状态并且使其不可更改，可以通过以下步骤实现：

基本概念

Radio Button（单选按钮）：一组单选按钮中，用户只能选择一个选项。
Checked 属性：用于设置或返回单选按钮是否被选中。
Disabled 属性：用于禁用单选按钮，使其无法被点击或更改。

实现方法

设置选中状态：使用checked属性。
设置不可更改状态：使用disabled属性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Example</title>
</head>
<body>
    <form>
        <input type="radio" id="option1" name="options" value="Option 1">
        <label for="option1">Option 1</label><br>
        <input type="radio" id="option2" name="options" value="Option 2" checked disabled>
        <label for="option2">Option 2 (Selected and Disabled)</label><br>
        <input type="radio" id="option3" name="options" value="Option 3">
        <label for="option3">Option 3</label>
    </form>

    <script>
        // 通过JavaScript设置第二个单选按钮为选中且不可更改
        document.addEventListener("DOMContentLoaded", function() {
            var option2 = document.getElementById("option2");
            option2.checked = true;
            option2.disabled = true;
        });
    </script>
</body>
</html>

解释

HTML部分：
- id和for属性用于关联标签和单选按钮，提高可访问性。
- 第二个单选按钮（option2）初始状态为选中且禁用。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取第二个单选按钮元素，并设置其checked属性为true，disabled属性为true。