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 regardless of whether I click the checkbox or not.

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

</body>
</html>

Here's the Javascript code:

function enable(x) {
    x = document.getElementbyId("gift");
    x.checked
    if(x == true) {
        var textarea = document.getElementbyId("message");
        textarea.disabled = false;
    }
    else {
        var textarea = document.getElementbyId("message");
        textarea.disabled = true;
    }

}

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

回答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.

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

来源：https://stackoverflow.com/questions/47125381/enable-disable-textarea-with-checkbox

标签

javascript

html

dom

checkbox