Read Only Text Column With Checkbox

Question

I made a very easy one HTML input column. I added JavaScript to it with a checkbox in it. When I clicked check box checked I want write the text or unchecked the text box read only how to solve my problem. Give for example for my code

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

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

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

    </script>

ztadic91 · Accepted Answer · 2018-03-10 09:05:20Z

1

Add an event listener to the change event on the checkbox.

<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

edited Mar 10, 2018 at 9:05

answered Mar 9, 2018 at 19:23

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Diyan salman Over a year ago

working.. but first time i want check box unchecked so read only. when i checked the check box i want write the text

ztadic91 Over a year ago

Change the initial attributes on the the HTML and invert the change logic. I've updated the answer

Collectives™ on Stack Overflow

Read Only Text Column With Checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related