Checkbox с раскрывающимся полями для заполнения на форме
Есть форма, на форме есть checkbox по нажатию на него раскрываются дополнительные поля для заполнения. Как сделать так, чтобы после сохранения при просмотре или редактировании этой формы если хотя бы 1 поле в раскрывающейся области checkbox заполнено оно автоматом было раскрыто ?
|
Juslaines,
сделайте минимальный макет. Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<div class="row form-check">
<label><input class="form-check-input checkbox" type="checkbox" id="checkbox2" value="checkbox-block-2"> Оплата</label>
</div>
<div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
<div class="row">
<div class="col"><?= $form->field($claim, 'clPayMain')->widget(MaskMoney::classname(), [
'pluginOptions' => [
'prefix' => '$ ',
'allowNegative' => false,
'allowZero' => true,
'allowEmpty' => false,
]
])->label("основная сумма оплат ($)") ?>
</div>
<div class="col"><?= $form->field($claim, 'clPayPenalty')->widget(MaskMoney::classname(), [
'pluginOptions' => [
'prefix' => '$ ',
'allowNegative' => false,
'allowZero' => true,
'allowEmpty' => false,
]
])->label("неустойка (штраф, пеня)($)") ?>
</div>
<div class="col"><?= $form->field($claim, 'clPayPercent')->widget(MaskMoney::classname(), [
'pluginOptions' => [
'prefix' => '$ ',
'allowNegative' => false,
'allowZero' => true,
'allowEmpty' => false,
]
])->label("проценты($)") ?>
</div>
<div class="col"><?= $form->field($claim, 'clPayDamages')->widget(MaskMoney::classname(), [
'pluginOptions' => [
'prefix' => '$ ',
'allowNegative' => false,
'allowZero' => true,
'allowEmpty' => false,
]
])->label("убытки($)") ?>
</div>
</div>
</div>
|
Juslaines,
не ясен момент, как и когда поля будут заполнены, что их заполняет, то и должно открывать блок. возможный вариант, после загрузки страницы, но лучше это сделать на сервере сразу.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".form-check").forEach(div => {
let nextDiv = div.nextElementSibling;
let filled = Array.from(nextDiv.querySelectorAll("input"), ({
value
}) => value)
.filter(value => value).length;
if (filled) {
nextDiv.style.display = "block";
div.querySelector("input").checked = true;
}
});
})
</script>
</head>
<body>
<div class="row form-check">
<label><input class="form-check-input checkbox" type="checkbox" id="checkbox2" value="checkbox-block-2"> Оплата</label>
</div>
<div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
<div class="row">
<div class="col"><input name="" value="12345">
</div>
<div class="col"><input name="">
</div>
<div class="col"><input name="">
</div>
<div class="col"><input name="">
</div>
</div>
</div>
<div class="row form-check">
<label><input class="form-check-input checkbox" type="checkbox" id="test" value="test"> test</label>
</div>
<div class="checkbox-blocks" id="checkbox-block-2" style="display: none;">
<div class="row">
<div class="col"><input name="">
</div>
<div class="col"><input name="">
</div>
<div class="col"><input name="">
</div>
<div class="col"><input name="">
</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:18. |