我在选中的复选框上启用 3 个文本框，并在取消选中的复选框上禁用它们，但不知道为什么代码不起作用。默认情况下，它们在未选中的复选框下被禁用。
<div class="form-group">
<label class="col-sm-2 control-label" for="input-order-status">
<?php echo "Modify Default Package Dimensions:"; ?>
</label>
<div class="col-sm-10">
<input class="form-control" type="checkbox" name="Modify_Default_Dimensions" value="1" onclick="checkboxChecked(this);">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-order-status">
<?php echo "Depth:"; ?>
</label>
<div class="col-sm-10">
<input class="form-control hide_textbox" type="text" id="prod_depth" class="" name="dhl_product_depth" value="12" disabled/> cm
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-order-status">
<?php echo "Width:"; ?>
</label>
<div class="col-sm-10">
<input class="form-control hide_textbox" type="text" id="prod_width" name="dhl_product_width" value="34" disabled/> cm
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-order-status">
<?php echo "Height:"; ?>
</label>
<div class="col-sm-10">
<input class="form-control hide_textbox" type="text" id="prod_height" name="dhl_product_height" value="123" disabled/> cm
</div>
</div>
function checkboxChecked(clickedBox) {
var textbox_hide = document.getElementsByClassName('hide_textbox');
//alert(textbox_hide.length);
for(var i = 0; i < textbox_hide.length; i++) {
textbox_hide[i].disabled = !clickedBox.checked;
}
}
最佳答案
你的代码工作正常。问题是你有两个 class文本框 input 上的属性元素，因此第二个元素(其中包含您要查找的类)被忽略。
<input class="form-control hide_textbox" type="text" id="prod_width" name="dhl_product_width" value="34" disabled/>
请注意class在上面的示例中，属性有两个值。
您的 fiddle 也没有正确设置，因为 JS 代码需要放置在 <head /> 中该文件的。
关于javascript - 复选框的单击无法使用 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36363987/