禁用和启用带有单选按钮的复选框

基础概念

复选框（Checkbox）：是一种允许用户从多个选项中选择一个或多个选项的控件。 单选按钮（Radio Button）：是一种允许用户从多个选项中选择一个选项的控件。

类型

静态禁用：在页面加载时就确定哪些选项是禁用的。
动态禁用：根据用户的操作或其他条件实时改变选项的启用状态。

应用场景

表单验证：在用户未填写必填字段时禁用提交按钮。
权限控制：根据用户的权限级别显示或隐藏某些选项。
步骤引导：在多步骤表单中，根据当前步骤启用或禁用后续步骤的选项。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何根据单选按钮的状态来启用或禁用复选框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox and Radio Button Example</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="option" value="enable" onclick="toggleCheckbox()"> Enable Checkbox
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="disable" onclick="toggleCheckbox()"> Disable Checkbox
        </label>
        <br>
        <label>
            <input type="checkbox" id="myCheckbox"> Option 1
        </label>
    </form>

    <script>
        function toggleCheckbox() {
            const checkbox = document.getElementById('myCheckbox');
            const radioButtons = document.getElementsByName('option');
            for (let radioButton of radioButtons) {
                if (radioButton.value === 'enable') {
                    checkbox.disabled = false;
                } else if (radioButton.value === 'disable') {
                    checkbox.disabled = true;
                }
            }
        }
    </script>
</body>
</html>