2016-04-01 11 views
1

Ich aktiviere 3 Textfelder auf checked checkbox und deaktiviere sie auf Kontrollkästchen, aber nicht wissen, warum der Code nicht funktioniert. Standardmäßig sind sie deaktiviert, wenn das Kontrollkästchen deaktiviert ist.Onclick der Checkbox funktioniert nicht Javascript

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

Fiddle

+0

Ihre Geige wird nicht nach oben rechts, die Ihr erstes Problem sein würde. Sie haben den JavaScript-Abschnitt auf "onload" ausgeführt, wenn Sie ihn als "body" oder "head" markieren lassen sollten. (Klicken Sie auf das Zahnrad-Symbol) – epascarello

Antwort

0

Ihr Code funktioniert gut. Das Problem ist, dass Sie zwei class Attribute auf der Textbox input Elemente haben, so dass die zweite (die die gesuchte Klasse enthielt) ignoriert wurde.

Beachten Sie, dass das Attribut class im obigen Beispiel zwei Werte hat.

Ihre Fiddle wurde auch nicht korrekt eingerichtet, da der JS-Code in <head /> des Dokuments platziert werden muss.

Working example

+0

Vielen Dank mein schlechtes :( –

Verwandte Themen