checkbox event onclick не работает

Question

У меня есть флажок и 3 текстовых поля, я хочу отключить все 3 текстовых поля, когда установлен флажок. Для этого я сделал этот код, но не работал.

<tr> 
<td><?php echo "Modify Default Package Dimensions:"; ?></td> 
<td><input type="checkbox" name="Modify_Default_Dimensions" value="1" onclick="document.getElementsByClassName('hide_textbox').disabled=this.checked;"></td> 
</tr> 

<td><?php echo "Depth"; ?></td> 
<td><input type="text" class="hide_textbox" name="dhl_product_depth" value="<?php echo $product_depth ?>" /> cm</td> 
</tr> 
<tr> 
<td><?php echo "Width"; ?></td> 
<td><input type="text" class="hide_textbox" name="dhl_product_width" value="<?php echo $product_width ?>" /> cm</td></tr> 
<tr> 
<td><?php echo "Height"; ?></td> 
<td><input type="text" class="hide_textbox" name="dhl_product_height" value="<?php echo $product_height ?>" /> cm</td> 
</tr> 

Answer 1

getElementsByClassName возвращает список узлов (что-то вроде массива, но без методов), и вы должны перебрать массив для изменения каждого члена с этим указанным классом.

Для удобства чтения, изменить ваш флажок, чтобы вызвать функцию при нажатии:

<input type="checkbox" name="Modify_Default_Dimensions" value="1" onclick="checkboxChecked(this);"></td> 

И определим функцию:

function checkboxChecked(clickedBox) { 
    var hide_textbox = document.getElementsByClassName('hide_textbox'); 
    for(var i = 0; i < hide_textbox.length; i++) { 
     hide_textbox[i].disabled = clickedBox.checked; 
    } 
} 

---

EDIT: Если вы хотите, чтобы ваши текстовые поля по умолчанию отключена и проверки флажок включит их, во-первых, добавьте это, чтобы отключить все текстовое поле при загрузке страницы:

var textboxes = document.getElementsByClassName('hide_textbox'); 
for(var b = 0; b < textboxes.length; b++) { 
    textboxes[b].disabled = true; 
} 

И тогда вы можете изменить свою функцию (обратите внимание, что я не определяю hide_textbox на этот раз).

function checkboxChecked(clickedBox) { 
    for(var i = 0; i < textboxes.length; i++) { 
     textboxes[i].disabled = !clickedBox.checked; // if checked, this will enable it 
    } 
}