Styjun

multicol package causes underfull hbox

How to draw pentagram-like shape in Latex?

Gambler's Fallacy Dice

Quotient of Three Dimensional Torus by Permutation on Coordinates

Windows reverting changes made by Linux to FAT32 partion

Are there any symmetric cryptosystems based on computational complexity assumptions?

Is it standard to have the first week's pay indefinitely withheld?

How can I monitor the bulk API limit?

Does the US Supreme Court vote using secret ballots?

How can sister protect herself from impulse purchases with a credit card?

Alternative classical explanation of the Stern-Gerlach Experiment?

on the truth quest vs in the quest for truth

FIFO data structure in pure C

Why aren't satellites disintegrated even though they orbit earth within earth's Roche Limits?

Why does the setUID bit work inconsistently?

Can an airline pilot be prosecuted for killing an unruly passenger who could not be physically restrained?

Have the writers and actors of GOT responded to its poor reception?

What's is the easiest way to purchase a stock and hold it

Bookshelves: the intruder

In Dutch history two people are referred to as "William III"; are there any more cases where this happens?

Show that the characteristic polynomial is the same as the minimal polynomial

What color to choose as "danger" if the main color of my app is red

Referring to a character in 3rd person when they have amnesia

Why does a table with a defined constant in its index compute 10X slower?

How do I disable textarea on checkbox click?

Enable/Disable textarea with checkboxHow do JavaScript closures work?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How to check whether a string contains a substring in JavaScript?How to disable resizable property of textarea?How do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

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>

javascript jquery html

share|improve this question

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The only code you've supplied is your basic HTML structure. What JavaScript or jQuery have you attempted to achieve your goal?
  
  – Robert
  Mar 23 at 17:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of JS - Enable/Disable textarea with checkbox
  
  – Anurag Srivastava
  Mar 23 at 17:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That duplicate is almost just a non-related bug in that guy's code, though. An answer here would be more straightforward because the question is.
  
  – D_N
  Mar 23 at 17:42
  

  
  
  
  

add a comment | 

0

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>

javascript jquery html

share|improve this question

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The only code you've supplied is your basic HTML structure. What JavaScript or jQuery have you attempted to achieve your goal?
  
  – Robert
  Mar 23 at 17:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of JS - Enable/Disable textarea with checkbox
  
  – Anurag Srivastava
  Mar 23 at 17:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That duplicate is almost just a non-related bug in that guy's code, though. An answer here would be more straightforward because the question is.
  
  – D_N
  Mar 23 at 17:42
  

  
  
  
  

add a comment | 

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>

javascript jquery html

share|improve this question

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

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

share|improve this question

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

share|improve this question

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

edited Mar 23 at 17:30

j08691

169k20200216

edited Mar 23 at 17:30

j08691

169k20200216

asked Mar 23 at 17:27

BillNathanBillNathan

1669

asked Mar 23 at 17:27

BillNathanBillNathan

1669

6 Answers
6

active

oldest

votes

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

share|improve this answer

edited Mar 24 at 11:56

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

add a comment | 

0

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>

share|improve this answer

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I did it without addEventListener. It seems it helps shortening the code :)
  
  – muhammad tayyab
  Mar 23 at 17:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @muhammadtayyab, using onclick is an insecure way. Instead, addEventListener provides better security, it's cleaner and most commonly used. Even more, using this you don't mix your html with your js.
  
  – Ender Look
  Mar 23 at 17:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK great. I think just provided an alternate version
  
  – muhammad tayyab
  Mar 23 at 17:44
  

  
  
  
  

add a comment | 

0

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" />

share|improve this answer

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

add a comment | 

0

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>

share|improve this answer

edited Mar 23 at 17:44

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What about if he unchecked again?
  
  – muhammad tayyab
  Mar 23 at 17:42
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sure. Updated. Please run the code again.
  
  – Pablo Darde
  Mar 23 at 17:45
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

edited Mar 23 at 17:52

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can reduce your code by removing the if/else logic and put directly document.getElementById("myTextArea").disabled = chk.checked;
  
  – Knriano
  Mar 23 at 17:49
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks I just did it!
  
  – muhammad tayyab
  Mar 23 at 17:52
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

edited Mar 26 at 6:32

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There's this one issue. If I write something in the textarea and then disable the textarea the text remains inside. Is there a way that any text written in it also gets removed?
  
  – BillNathan
  Mar 24 at 11:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BillNathan Updated the code to removing the text
  
  – PDSSandeep
  Mar 26 at 6:34
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55316470%2fhow-do-i-disable-textarea-on-checkbox-click%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

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

share|improve this answer

edited Mar 24 at 11:56

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

add a comment | 

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

share|improve this answer

edited Mar 24 at 11:56

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

add a comment | 

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

share|improve this answer

edited Mar 24 at 11:56

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

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

share|improve this answer

edited Mar 24 at 11:56

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

answered Mar 24 at 11:31

Rohit BatraRohit Batra

602417

0

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>

share|improve this answer

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I did it without addEventListener. It seems it helps shortening the code :)
  
  – muhammad tayyab
  Mar 23 at 17:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @muhammadtayyab, using onclick is an insecure way. Instead, addEventListener provides better security, it's cleaner and most commonly used. Even more, using this you don't mix your html with your js.
  
  – Ender Look
  Mar 23 at 17:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK great. I think just provided an alternate version
  
  – muhammad tayyab
  Mar 23 at 17:44
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I did it without addEventListener. It seems it helps shortening the code :)
  
  – muhammad tayyab
  Mar 23 at 17:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @muhammadtayyab, using onclick is an insecure way. Instead, addEventListener provides better security, it's cleaner and most commonly used. Even more, using this you don't mix your html with your js.
  
  – Ender Look
  Mar 23 at 17:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK great. I think just provided an alternate version
  
  – muhammad tayyab
  Mar 23 at 17:44
  

  
  
  
  

add a comment | 

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>

share|improve this answer

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

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>

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>

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>

share|improve this answer

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

answered Mar 23 at 17:33

Ender LookEnder Look

1,219924

0

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" />

share|improve this answer

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

add a comment | 

0

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" />

share|improve this answer

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

add a comment | 

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" />

share|improve this answer

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

<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" />

<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" />

<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" />

share|improve this answer

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

answered Mar 23 at 17:39

Lalit SharmaLalit Sharma

11

0

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>

share|improve this answer

edited Mar 23 at 17:44

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What about if he unchecked again?
  
  – muhammad tayyab
  Mar 23 at 17:42
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sure. Updated. Please run the code again.
  
  – Pablo Darde
  Mar 23 at 17:45
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

edited Mar 23 at 17:44

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What about if he unchecked again?
  
  – muhammad tayyab
  Mar 23 at 17:42
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Sure. Updated. Please run the code again.
  
  – Pablo Darde
  Mar 23 at 17:45
  

  
  
  
  

add a comment | 

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>

share|improve this answer

edited Mar 23 at 17:44

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

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>

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>

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>

share|improve this answer

edited Mar 23 at 17:44

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

answered Mar 23 at 17:31

Pablo DardePablo Darde

1,77311729

0

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>

share|improve this answer

edited Mar 23 at 17:52

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can reduce your code by removing the if/else logic and put directly document.getElementById("myTextArea").disabled = chk.checked;
  
  – Knriano
  Mar 23 at 17:49
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks I just did it!
  
  – muhammad tayyab
  Mar 23 at 17:52
  

  
  
  
  

add a comment | 

0

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>

share|improve this answer

edited Mar 23 at 17:52

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can reduce your code by removing the if/else logic and put directly document.getElementById("myTextArea").disabled = chk.checked;
  
  – Knriano
  Mar 23 at 17:49
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks I just did it!
  
  – muhammad tayyab
  Mar 23 at 17:52
  

  
  
  
  

add a comment | 

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>

share|improve this answer

edited Mar 23 at 17:52

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

<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>

<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>

<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>

share|improve this answer

edited Mar 23 at 17:52

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

answered Mar 23 at 17:38

muhammad tayyabmuhammad tayyab

299212

0

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

share|improve this answer

edited Mar 26 at 6:32

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There's this one issue. If I write something in the textarea and then disable the textarea the text remains inside. Is there a way that any text written in it also gets removed?
  
  – BillNathan
  Mar 24 at 11:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BillNathan Updated the code to removing the text
  
  – PDSSandeep
  Mar 26 at 6:34
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

edited Mar 26 at 6:32

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  There's this one issue. If I write something in the textarea and then disable the textarea the text remains inside. Is there a way that any text written in it also gets removed?
  
  – BillNathan
  Mar 24 at 11:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BillNathan Updated the code to removing the text
  
  – PDSSandeep
  Mar 26 at 6:34
  

  
  
  
  

add a comment | 

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

share|improve this answer

edited Mar 26 at 6:32

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

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

share|improve this answer

edited Mar 26 at 6:32

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308

answered Mar 23 at 17:57

PDSSandeepPDSSandeep

1308