Здравствуйте.
Есть сложная в плане логики форма с чекбоксами. В JS не разбираюсь, потому использую готовые скрипты. Форма:
<div class="form-group">
<div class="checkbox" style="margin:-10px 0 0 25px;">
<input class="control" data-type="one" type="checkbox" name="razryad[]" value="1 разряд и выше" />1 разряд и выше<br />
<input class="control" data-type="two" type="checkbox" name="razryad[]" value="2 разряд и выше" />2 разряд и выше<br />
<input class="control" data-type="three" type="checkbox" name="razryad[]" value="Нет разряда" />Нет разряда
</div>
</div>
<div style="border:1px solid black; padding:10px; margin:3px 0 3px 0;">
<table>
<tr>
<td><input class="check one two three" type="checkbox" name="option[]" onclick="Calculator.onSelect(1, 10, this)" value="Дисциплина #01" disabled />Дисциплина #01</td>
</tr>
</table><br />
</div>
<div class="block" style="border: 1px solid black; padding: 10px; margin: 3px 0 3px 0;">
<table> <!-- Единый взнос за обе дисциплины -->
<tr>
<td><input class="check one two three" type="checkbox" name="option[]" onclick="Calculator.onSelect(2, 10, this)" value="Дисциплина #02" disabled />Дисциплина #02</td>
</tr>
<tr>
<td><input class="check one" type="checkbox" name="option[]" onclick="Calculator.onSelect(2, 10, this)" value="Дисциплина #03" disabled />Дисциплина #03</td>
</tr>
</table><br />
</div>
<div style="border: 1px solid black; padding: 10px; margin: 3px 0 3px 0;">
<table> <!-- Единый взнос за три дисциплины -->
<tr>
<td><input class="check one two three" type="checkbox" name="option[]" onclick="Calculator.onSelect(3, 10, this)" value="Дисциплина #04" disabled />Дисциплина #04</td>
</tr>
<tr>
<td><input class="check one two" type="checkbox" name="option[]" onclick="Calculator.onSelect(3, 10, this)" value="Дисциплина #05" disabled />Дисциплина #05</td>
</tr>
<tr>
<td><input class="check one two three" type="checkbox" name="option[]" onclick="Calculator.onSelect(3, 10, this)" value="Дисциплина #06" disabled />Дисциплина #06</td>
</tr>
</table><br />
</div>
<div style="border: 1px solid black; padding: 10px; margin: 3px 0 3px 0;">
<table>
<tr>
<td><input class="check one two three" type="checkbox" name="option[]" onclick="Calculator.onSelect(4, 10, this)" value="Дисциплина #07" disabled />Дисциплина #07</td>
</tr>
</table><br />
</div>
<div><br />
<b>Итоговая стоимость:</b> <span id="r" name="def_sum">0</span> руб.<br />
<input type="hidden" id="def_sum" name="def_sum"><br />
</div>
<button id="save" type="submit" class="btn btn-primary">Посчитать стоимость участия</button>
Логика формы следующая:
Есть 3 основных чекбокса - разряды. Чекбоксы дисциплин в это время заблокированы. При выборе одного из разрядов разблокируются определенные дисциплины. За это отвечает скрипт:
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
window.onload=function(){
$('.control').on('change',function(){
if($(this).prop('checked')){
$('.check.'+$(this).attr('data-type')).removeAttr('disabled');
}else{
$('.check.'+$(this).attr('data-type')).prop('checked',false).attr('disabled','disabled');
}
})
}
При выборе чекбоксов дисциплин - их стоимость суммируютя JS-калькулятором. Код:
var Calculator = {
selectedGroups: [],
sum: 0,
isGroupSelected: function(groupId) {
return this.selectedGroups.indexOf(groupId) != -1;
},
addSelected: function(groupId, amount) {
if (!this.isGroupSelected(groupId)) {
this.changeSum(amount);
}
this.selectedGroups.push(groupId);
},
removeSelected: function(groupId, amount) {
if (!this.isGroupSelected(groupId)) {
return;
}
var groupIndex = this.selectedGroups.indexOf(groupId);
this.selectedGroups.splice(groupIndex, 1);
if (!this.isGroupSelected(groupId)) {
this.changeSum(-amount);
}
},
onSelect: function(groupId, amount, elem) {
if (elem.checked) {
this.addSelected(groupId, amount);
} else {
this.removeSelected(groupId, amount);
}
},
changeSum: function(amount) {
this.sum += amount;
this.showSum();
},
showSum: function() {
document.getElementById ('r').innerHTML = this.sum;
document.getElementById('def_sum').value = document.getElementById('r').innerHTML;
}
}
ЗАДАЧА: Нужен скрипт, чтобы при выборе дисциплин 04 и/или 06 автоматически отмечалась дисциплина 02. И при этом корректно работал калькулятор.
Буду очень благодарен за помощь.
$(".checkboxClass").prop("checked", true);$(".checkboxClass").prop("checked", false);$(".checkboxClass").prop("disabled", true);$(".checkboxClass").prop("disabled", false);
if ($(".checkboxClass").is(":checked")){
console.log('Checked');
} else {
console.log('Unchecked');
}
$(".checkboxClass").on("change",function(){
var $this = $(this); // $this - это будет ваш чекбокс
});
Уверен моих "сниппетов"("кусочков кода") достаточно что-бы написать нужную Вам логику.
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости