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

<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">

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

<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">