Question

I don’t really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:

My HTML form has a checkbox and then a textarea:

<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>

I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.

I’ve had a look here and on google, I couldn’t find any clear examples of how to do it.

I’m guessing this can be done in Javascript, but I’m feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?

Answer 1

<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>

<script>
function toggleDisabled(_checked) {
    document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>