-1

Здравствуйте.

Есть сложная в плане логики форма с чекбоксами. В 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>

Логика формы следующая:

  1. Есть 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');
    }
    })
    }
    
  2. При выборе чекбоксов дисциплин - их стоимость суммируютя 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. И при этом корректно работал калькулятор.

Буду очень благодарен за помощь.

2 ответа 2

0
  1. Поставить чекбокс: $(".checkboxClass").prop("checked", true);
  2. Снять чекбокс: $(".checkboxClass").prop("checked", false);
  3. Заблокировать: $(".checkboxClass").prop("disabled", true);
  4. Разблокировать: $(".checkboxClass").prop("disabled", false);
  5. Состояние: если галочка стоит то А иначе В if ($(".checkboxClass").is(":checked")){ console.log('Checked'); } else { console.log('Unchecked'); }
  6. Событие которое реагирует на перемену состояний: $(".checkboxClass").on("change",function(){ var $this = $(this); // $this - это будет ваш чекбокс });

Уверен моих "сниппетов"("кусочков кода") достаточно что-бы написать нужную Вам логику.

1
  • Благодарю. Но, как я писал, в JS не разбираюсь. Каюсь, прозвучит нагло, но есть ли у вас возможность показать готовый скрипт?
    – alegraft
    29 сен 2017 в 12:33
0

Для тех, у кого возникнет аналогичный вопрос:

var  array = {
"Дисциплина #04": "Дисциплина #02",
"Дисциплина #06": "Дисциплина #02"
}

$(".check").on('change', function() {
var select = $(this).val();
for (var key in array) {
if ($(this).prop("checked") && select == key ){
target = $("input[value='"+array[key]+"']");
if(!target.prop('checked')){
target.click();
}
}
}
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.