如何在不删除文本值的情况下“禁用”单选按钮，以及是否选中该单选按钮

在不删除文本值的情况下“禁用”单选按钮，并且保持其选中状态，可以通过HTML和JavaScript来实现。以下是详细步骤和示例代码：

基础概念

单选按钮（Radio Button）：一种用户界面元素，允许用户在多个选项中选择一个。
禁用（Disabled）：使元素不可交互，通常表现为灰色且无法点击。
选中状态（Checked）：表示单选按钮已被用户选择。

类型与应用场景

类型：单选按钮通常用于互斥选项的选择。
应用场景：表单验证、条件性显示、动态内容控制等。

实现方法

HTML部分：创建单选按钮并设置其初始选中状态。
JavaScript部分：通过脚本动态禁用单选按钮。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Radio Button</title>
</head>
<body>
    <form id="myForm">
        <label>
            <input type="radio" name="option" value="1" checked> Option 1
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="2"> Option 2
        </label>
        <br>
        <button type="button" onclick="disableRadioButton()">Disable Option 1</button>
    </form>

    <script>
        function disableRadioButton() {
            // 获取第一个单选按钮
            var radioButton = document.querySelector('input[name="option"][value="1"]');
            // 设置禁用状态
            radioButton.disabled = true;
            // 确保选中状态保持不变
            radioButton.checked = true;
        }
    </script>
</body>
</html>