Onclick of checkbox not working Javascript

I am enabling 3 text boxes on checked checkbox and disabling them on un check checkbox, but dont know why the code is not working. By default they are disabled with unchecked checkbox.

HTML:

<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" type="text" id="prod_depth" class="hide_textbox" 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" type="text" id="prod_width" class="hide_textbox" 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" type="text" id="prod_height" class="hide_textbox" name="dhl_product_height" value="123" disabled/> cm 
               </div>
            </div>

JS:

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;
    }
}

Fiddle