我的任务是使用 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;
}
}
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 元素。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)