如何在未选中复选框时禁用输入框

在未选中复选框时禁用输入框可以通过以下几种方式实现：

使用JavaScript：通过监听复选框的状态变化事件，当复选框未选中时，将输入框的disabled属性设置为true，禁用输入框。示例代码如下：

<script>
    function toggleInput() {
        var checkbox = document.getElementById("myCheckbox");
        var input = document.getElementById("myInput");
        
        if (checkbox.checked) {
            input.disabled = false; // 复选框选中时启用输入框
        } else {
            input.disabled = true; // 复选框未选中时禁用输入框
        }
    }
</script>

<input type="checkbox" id="myCheckbox" onchange="toggleInput()">
<input type="text" id="myInput">

使用HTML的disabled属性：在HTML中，可以直接在输入框的标签中添加disabled属性，并设置为一个条件表达式，根据复选框的状态来动态决定是否禁用输入框。示例代码如下：

<input type="checkbox" id="myCheckbox">
<input type="text" id="myInput" disabled="disabled" data-bind="enable: myCheckbox.checked">

使用CSS：通过CSS选择器和伪类来选择未选中的复选框，并将相应的输入框设置为禁用状态。示例代码如下：

<style>
    input[type="checkbox"]:not(:checked) + input[type="text"] {
        pointer-events: none; // 禁用鼠标事件
        background-color: #f2f2f2; // 设置背景色为灰色
    }
</style>

<input type="checkbox" id="myCheckbox">
<input type="text" id="myInput">

以上是三种常见的实现方式，根据具体需求和项目环境选择适合的方法。腾讯云提供了丰富的云计算产品和服务，可以根据具体需求选择适合的产品进行开发和部署。具体产品和介绍可以参考腾讯云官方网站：https://cloud.tencent.com/