Question

我有一个复选框和3个文本框，我想要的是在选中复选框时禁用所有3个文本框。为此，我已经完成了这段代码但没有工作。

<tr>
<td><?php echo "Modify Default Package Dimensions:"; ?></td>
<td><input type="checkbox" name="Modify_Default_Dimensions" value="1" onclick="document.getElementsByClassName('hide_textbox').disabled=this.checked;"></td>
</tr>

<td><?php echo "Depth"; ?></td>
<td><input type="text" class="hide_textbox" name="dhl_product_depth" value="<?php echo $product_depth ?>" /> cm</td>
</tr>
<tr>
<td><?php echo "Width"; ?></td>
<td><input type="text" class="hide_textbox" name="dhl_product_width" value="<?php echo $product_width ?>" /> cm</td></tr>
<tr>
<td><?php echo "Height"; ?></td>
<td><input type="text" class="hide_textbox" name="dhl_product_height" value="<?php echo $product_height ?>" /> cm</td>
</tr>

Answer 1

getElementsByClassName返回一个节点列表（类似于数组但没有方法），你必须循环遍历数组以修改具有该指定类的每个成员。

为了便于阅读，请修改复选框以在单击时调用函数：

<input type="checkbox" name="Modify_Default_Dimensions" value="1" onclick="checkboxChecked(this);"></td>

定义函数：

function checkboxChecked(clickedBox) {
    var hide_textbox = document.getElementsByClassName('hide_textbox');
    for(var i = 0; i < hide_textbox.length; i++) {
        hide_textbox[i].disabled = clickedBox.checked;
    }
}

<小时/> 编辑：如果您希望默认情况下禁用文本框并选中复选框将启用它们，请首先添加此项以禁用页面加载时的所有文本框：

var textboxes = document.getElementsByClassName('hide_textbox');
for(var b = 0; b < textboxes.length; b++) {
    textboxes[b].disabled = true;
}

然后你可以修改你的功能（注意我这次没有定义hide_textbox）。

function checkboxChecked(clickedBox) {
    for(var i = 0; i < textboxes.length; i++) {
        textboxes[i].disabled = !clickedBox.checked; // if checked, this will enable it
    }
}

复选框事件onclick不起作用

1 个答案: