How do I disable textarea on checkbox click?

Question

How do I disable the textarea onclick of the checkbox?

<p>What caused the damage?</p>
<textarea rows="5"></textarea>
<input type="checkbox">
<label>I don't know</label>

Answer 1

This code should work as what you intend to achieve.

$('#checkbox').on('click', function(){ 
  if($("#checkbox").is(":checked")){ 
        $('#textArea').val('');
        $('#textArea'). attr('disabled','disabled'); 
    }else{ 
       $('#textArea').removeAttr('disabled'); 
    } 
   }
  );

Answer 2

 var textArea = document.querySelector('#text-area'); var checkbox = document.querySelector('#cbox'); function toggleTextArea() { var disabled = textArea.getAttribute('disabled'); if (disabled) { textArea.removeAttribute('disabled'); } else { textArea.setAttribute('disabled', 'disabled'); } } checkbox.addEventListener('click', toggleTextArea); 

 <p>What caused the damage?</p> <textarea rows="5" id="text-area"></textarea> <input type="checkbox" id="cbox"> <label for="cbox">I don't know</label> 

Answer 3

Using the disabled property of a <textarea> liike <textarea disabled> .

 let checker = document.getElementById("checker"); let textInput = document.getElementById("textInput"); checker.addEventListener('click', () => textInput.disabled = checker.checked); 

 <p>What caused the damage?</p> <textarea id="textInput" rows="5"></textarea> <input type="checkbox" id="checker"> <label>I don't know</label> 

Answer 4

I just added a JavaScript that selects the text area and enable and disable it based on what your checkbox

 <script> var flagChk = document.getElementById("chk"); function disableBox(){ document.getElementById("myTextArea").disabled = chk.checked; document.getElementById("myTextArea").enabled = chk.unchecked; } </script> <p>What caused the damage?</p> <textarea rows="5" id="myTextArea"></textarea> <input type="checkbox" onclick="disableBox()" id="chk"> <label>I don't know</label> 

Answer 5

The HTML Markup consists of a CheckBox and a TextBox which is by default disabled using the disabled attribute. The CheckBox has been assigned a JavaScript OnClick event handler. When the CheckBox is clicked, the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the TextBox is enabled or disabled by setting the disabled property to false or true respectively.

 <script type="text/javascript"> function EnableDisableTextBox(chkPassport) { var txtPassportNumber = document.getElementById("txtPassportNumber"); txtPassportNumber.disabled = chkPassport.checked ? false : true; if (!txtPassportNumber.disabled) { txtPassportNumber.focus(); } } </script> <label for="chkPassport"> <input type="checkbox" id="chkPassport" onclick="EnableDisableTextBox(this)" /> Do you have Passport? </label> <br /> Passport Number: <input type="text" id="txtPassportNumber" disabled="disabled" /> 

Answer 6

 $('#checker').click(function(){
     if($("#checker").is(":checked")){
            $('#textInput').attr('disabled',true).val("");
     }else{
        $('#textInput').attr('disabled',false);
     }
 });