Enable/Disable Textarea With Checkbox
My task is to use JavaScript to enable the when the checkbox is clicked (on) and disable it when it is clicked (off). However, the code still isn't working, and won't do anything
Solution 1:
The issue is that your function is never being called. You need to bind a click event callback function that invokes enable. You also need some other code tweaks - see comments inline:
// Get reference to checkbox and textarea just once, not over and over
// Also, you were using .getElementById(), but your elements weren't
// given id's, they have names
var chk = document.querySelector("input[name=gift]"); // id is not "gift", name is
var textarea = document.querySelector("textarea[name=message"); // id is not "message", name is
// Set up click event handler:
chk.addEventListener("click", enable);
function enable() {
// Just base the disabled of the textarea on the opposite
// of the checkbox's checked state
textarea.disabled = !this.checked;
}<div id="container">
<h2> Order Information </h2>
<div class="entry">
Select color:
<select name="color">
<option selected="selected">White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select> <br><br>
Select shirt size:
<select name="sizeandprice">
<option>Small - $9.99</option>
<option>Medium - $10.99</option>
<option selected="selected">Large - $11.99</option>
<option>X-Large - $13.99</option>
</select><br><br>
Is this a gift? <input type="checkbox" name="gift"> <br><br>
Write your gift message here: <br>
<textarea disabled rows="5" cols="50" name="message">Type your message here.
</textarea>
</div>
</div>Solution 2:
document.getElementById('giftCheckbox').addEventListener( 'click', function(){
var textArea = document.getElementById('messageTxtArea')
textArea.disabled = !textArea.disabled
});<body>
<div id="container">
<h2> Order Information </h2>
<div class="entry">
Select color:
<select name="color">
<option selected="selected">White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select> <br><br>
Select shirt size:
<select name="sizeandprice">
<option>Small - $9.99</option>
<option>Medium - $10.99</option>
<option selected="selected">Large - $11.99</option>
<option>X-Large - $13.99</option>
</select><br><br>
Is this a gift? <input type="checkbox" id="giftCheckbox" name="gift"> <br><br>
Write your gift message here: <br>
<textarea disabled rows="5" cols="50" id="messageTxtArea" name="message">Type your message here.
</textarea>
</div>
</div>
</body>I added ids to your checkbox and textarea. I use .addEventListener() to register a callback on your checkbox click event, that enables/disables the textarea element.
Solution 3:
Your input type element has been given a attribute name="gift" and you are searching for a element which contains id="gift". You can change the attribute from name to id or use document.getElementsByName("gift"). See example of usage in document.document.getElementsByName
Post a Comment for "Enable/Disable Textarea With Checkbox"