使用复选框启用/禁用文本区域 [英] Enable/Disable textarea with checkbox
本文介绍了使用复选框启用/禁用文本区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的任务是使用JavaScript启用单击复选框（启用）时的，并禁用单击复选框（禁用）时的。
但是，该代码仍然无法正常工作，无论我是否单击复选框，都不会执行任何操作。
< / head>
< body>
< div id = container>
< h2>订单信息< / h2>
< div class = entry>
选择颜色：
<选择名称= color>
< option selected = selected>白色< / option>
< option>黑色< / option>
< option>红色< / option>
< option>绿色< / option>
< option>蓝色< / option>
< / select> < br>< br>
选择衬衫尺寸：
< select name = sizeandprice>
< option>小-$ 9.99< / option>
< option>中-$ 10.99< / option>
< option selected = selected>大-$ 11.99< / option>
< option> X大-$ 13.99< / option>
< / select> br< br>
这是礼物吗？ <输入type = checkbox name = gift> < br>< br>
在此处写下您的礼物信息：< br>
< textarea禁用的行= 5 cols = 50 name =消息>在此处键入您的消息。
< / 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;
}
}
解决方案
< pre class = snippet-code-js lang-js prettyprint-override>
document.getElementById（'giftCheckbox'）。addEventListener（'click'，function（）{var textArea = document.getElementById（' messageTxtArea'）textArea.disabled =！textArea.disabled}）;
< body>< div id = container>< h2>订单信息< / h2>< div class = entry>选择颜色：<选择名称=颜色> < option selected = selected>白色< / option> < option>黑色< / option> < option>红色< / option> < option>绿色< / option> < option>蓝色< / option> < / select> < br>< br>选择衬衫尺寸：<选择名称= sizeandprice> < option>小-$ 9.99< / option> < option>中-$ 10.99< / option> < option selected = selected>大-$ 11.99< / option> < option> X大-$ 13.99< / option> < / select> br< br>这是礼物吗？ < input type = checkbox id = giftCheckbox name = gift> < br>< br>在此处写下您的礼物信息：< br> < textarea禁用的行= 5 cols = 50 id = messageTxtArea name = message>在此处输入您的消息。 < / textarea>< / div>< / div>< / body>
我在您的复选框和文本区域添加了ID。我使用 .addEventListener（）在您的复选框click事件上注册一个回调，该回调启用/禁用textarea元素。
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;
}
}
解决方案
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.
这篇关于使用复选框启用/禁用文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
