2016-04-01 2 views
1

Я включил 3 текстовых поля на отмеченном флажке и отключил их, чтобы снять флажок, но не знаю, почему код не работает. По умолчанию они отключены с помощью флажка без отметки.Onclick of checkbox не работает 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

Вашей скрипка не настроен право, что бы ваша первая проблема. У вас есть секция JavaScript, работающая onload, когда вы должны иметь ее как тело или голову. (Нажмите на значок шестеренки) – epascarello

ответ

0

Ваш код работает отлично. Проблема в том, что у вас есть два атрибута class в текстовом поле input, поэтому второй (который содержал класс, который вы искали) был проигнорирован.

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

Отметьте, что атрибут class имеет два значения в приведенном выше примере.

Ваша скрипка также была настроена неправильно, так как код JS должен быть помещен в документ <head />.

Working example

+0

Спасибо большое за плохо :( –

Смежные вопросы