All geek questions in one place

Disable (disable) the HTML text box when ticking

I don't know much Javascript yet, I was hoping someone could help me figure out how to solve my problem:

In my HTML form there is a checkbox and then textarea :

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

I want textarea disconnect when the checkbox checked so that the user cannot click it and enter text.

I looked here and on Google, I could not find clear examples of how to do this.

I assume this can be done in Javascript, but I feel a little deeper. Can someone explain to me how to do this, preferably without using a third-party library?

+4
source share
6 answers
 <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>
+8
source

All you have to do is check the box, just add the disabled = "disabled" attribute in the text box.

Checkout jsfiddle I added

http://jsfiddle.net/Q9Lg4/

0
source

This is very easy to do with jQuery. Everyone uses jQuery, so you should :-).

 <form> <input type="checkbox" name="detailsgiven" id="detailsgiven" /> <textarea name="details" id="details"></textarea> </form> <script type="text/javascript"> jQuery(document).ready(function($) { $("#detailsgiven").change(function() { if($(this).is(":checked")) { $("#details").attr("disabled", "disabled"); } else { $("#details").removeAttr("disabled"); } }); }); </script>
0
source

try the following:

 if ($('input:checkbox').is(':checked')) { $('textarea').attr('disabled', 'disabled'); }
0
source 
 <form> <input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" /> <textarea id="t" name="details"></textarea> </form>

Note that the onclick flag is used to execute javascript code.

if you give the identifiers of the html elements, you can access the elements in javascripts via the getElementById javascript DOM (document object model) method.

And as soon as you have an element, you can set / get its attributes, do a lot of things.

0
source

According to my understanding to your requirement. The text box is first disabled. When the detailsgiven checkbox is checked, the textarea function is enabled and the checkbox is disabled, so it cannot be changed. Try it.

 <!DOCTYPE html> <html> <head> <script> function valueChanged() { var element1 = document.getElementById("detailsgiven"); var element2 = document.getElementById("details"); if(element1.checked) { element2.disabled=false; element1.disabled="disabled"; } } </script> </head> <body> <form> <input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/> <textarea name="details" id="details" disabled="true"></textarea> </form> </body> </html>
0
source

Source: https://habr.com/ru/post/1433767/

More articles:


All Articles