带复选框的只读文本列

Question

我制作了一个非常简单的 HTML 输入栏。我在其中添加了 JavaScript 并带有一个复选框。 当我单击复选框选中时，我想写文本或取消选中文本框只读如何解决我的问题。以我的代码为例

<input type="text" id="inputID" value="abc"></input>

    <input type="checkbox" id="myCheck" checked>

    <script>
   document.getElementById('inputID').readOnly = true;

    </script>

Answer 1

为复选框上的change 事件添加事件监听器。

<input type="text" id="inputID" value="abc" readonly></input>
<input type="checkbox" id="myCheck" >
<script>
    var checkbox = document.getElementById('myCheck');
    checkbox.addEventListener('change', function() {
        document.getElementById('inputID').readOnly = !this.checked; 
    });
</script>

Working fiddle