Onclick的復選框不工作Javascript

Question

我在復選框上啟用了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;
    }
}

小提琴

Answer 1

你的代碼運行正常。 問題是您在文本框input元素上有兩個class屬性，因此第二個屬性（包含您要查找的類）被忽略了。

<input class="form-control hide_textbox" type="text" id="prod_width" name="dhl_product_width" value="34" disabled/>

請注意，在上面的示例中， class屬性有兩個值。

您的小提琴也沒有正確設置，因為JS代碼需要放在文檔的<head />中。

工作實例

Onclick的復選框不工作Javascript

問題描述

1 個解決方案

解決方案1
0 已采納 2016-04-01 19:09:01

Onclick的復選框不工作Javascript

問題描述

1 個解決方案

解決方案1 0 已采納 2016-04-01 19:09:01

解決方案1
0 已采納 2016-04-01 19:09:01