如何在復選框單擊時禁用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);
     }
 });