复选框事件onclick不起作用

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 returns 一个节点列表（类似于数组但没有方法），您必须遍历数组以使用指定的 class 修改每个成员。

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

<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不起作用

checkbox event onclick not working

html

javascript

jquery