Onclick of checkbox not working Javascript
Question
I am enabling 3 text boxes on checked checkbox and disabling them on uncheck checkbox, but dont know why the code is not working. By default they are disabled with unchecked checkbox.
<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;
}
}
1 answers
solution1
0 ACCPTED 2016-04-01 19:09:01
Your code works fine. The issue is that you have two class attributes on the textbox input elements so the second one (which contained the class you were looking for) was ignored.
<input class="form-control hide_textbox" type="text" id="prod_width" name="dhl_product_width" value="34" disabled/>
Note that class attribute has two values in the above example.
Your fiddle was also not set up correctly as the JS code needs to be placed in the <head /> of the document.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.