如何在选中某些复选框(单选按钮)时启用/禁用X输入？

要在选中某些复选框（单选按钮）时启用或禁用某个输入框（例如文本输入框），可以使用JavaScript来实现这一功能。以下是一个完整的示例，展示了如何实现这一需求。

基础概念

HTML表单元素：包括复选框（<input type="checkbox">）、单选按钮（<input type="radio">）和输入框（<input type="text">）。
JavaScript事件监听：通过监听复选框或单选按钮的点击事件，来动态改变输入框的状态。
DOM操作：使用JavaScript操作DOM元素，修改其属性和样式。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enable/Disable Input</title>
</head>
<body>
    <form>
        <label>
            <input type="checkbox" id="check1"> 启用输入框
        </label>
        <br>
        <label>
            <input type="radio" name="radioGroup" id="radio1"> 启用输入框
        </label>
        <label>
            <input type="radio" name="radioGroup" id="radio2"> 禁用输入框
        </label>
        <br>
        <input type="text" id="textInput" placeholder="输入一些文本">
    </form>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const check1 = document.getElementById('check1');
    const radio1 = document.getElementById('radio1');
    const radio2 = document.getElementById('radio2');
    const textInput = document.getElementById('textInput');

    function updateInputState() {
        if (check1.checked || radio1.checked) {
            textInput.disabled = false;
        } else if (radio2.checked) {
            textInput.disabled = true;
        }
    }

    check1.addEventListener('change', updateInputState);
    radio1.addEventListener('change', updateInputState);
    radio2.addEventListener('change', updateInputState);

    // 初始化状态
    updateInputState();
});