Menu
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?
441
You can style checkbox label and readonly inputs with CSS, e.g.: input [readonly="readonly"] {} but the browser should make the checkbox should appear greyed out when set to readonly. "checkbox itself should appear greyed out just by setting the readonly attribute" - Tried in IE8, FF12.
Just add onclick="return false" in your HTML code.
Disabled: Removed Entirely From the FormWhen you add the disabled to a textarea the form that the textarea is a part of will ignore the textarea input when the form is submitted. This is a good option to use if you want to remove a textarea from a form unless some other condition is met.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
