使用复选框启用/禁用文本区域答案

【问题标题】：Enable/Disable textarea with checkbox使用复选框启用/禁用文本区域
【发布时间】：2023-03-18 03:30:01
【问题描述】：

我的任务是使用 JavaScript 在单击复选框时启用（打开）并在单击复选框时禁用它（关闭）。但是，代码仍然不起作用，无论我是否单击复选框，都不会执行任何操作。

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

这是 Javascript 代码：

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

}

【问题讨论】：

标签： javascript html dom checkbox

【解决方案1】：

问题是你的函数永远不会被调用。您需要绑定一个调用enable 的click 事件回调函数。您还需要一些其他代码调整 - 参见 cmets 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>

我在您的复选框和文本区域中添加了 ID。我使用 .addEventListener() 在您的复选框单击事件上注册一个回调，以启用/禁用 textarea 元素。

【讨论】：

请不要在第三方网站上发布答案，因为这些链接可能会随着时间的推移而失效。只需在您的答案中加入“code sn-p”即可。

【解决方案3】：

您的输入类型元素已被赋予属性name="gift"，您正在搜索包含id="gift" 的元素。您可以将属性从名称更改为 id 或使用document.getElementsByName("gift")。查看document.document.getElementsByName中的使用示例

【讨论】：

如果他去掉name，元素就不会在表单中提交它的数据。此外，.getElementsByName() 返回一个“活动”节点列表，由于它使用更多资源，因此它的用例有限。 .querySelectorAll() 是正确的现代方法。