如何在复选框单击时禁用textarea？

Question

如何禁用复选框的textarea onclick？

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

Answer 1

此代码应按您打算实现的那样工作。

$('#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

使用<textarea>的disabled属性，例如<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

我刚刚添加了一个JavaScript，用于选择文本区域并根据您的复选框启用和禁用它

 <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

HTML标记由一个CheckBox和一个TextBox组成，默认情况下，使用Disabled属性将其禁用。 已为CheckBox分配了一个JavaScript OnClick事件处理程序。 单击CheckBox后，将执行EnableDisableTextBox JavaScript函数。 在此函数内部，根据是选中（选中）还是未选中（选中）CheckBox，分别通过将Disabled属性设置为false或true来启用或禁用TextBox。

 <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);
     }
 });