Готов заплатить за доработку...
Необходимо чтоб получилось так
https://prnt.sc/knrqo2
1. При нажатии на радиокнопку становятся активными элементы на против нее, а в противоположном блоке выбрать ничего нельзя и на всех элементах снимается active, пока не переключить радиокнопку.
2. Первый вариант выбирает диапозон, второй конкретные дни.
3. Должно работать на основании имеющегося скрипта.
Сейчас у меня так:
<div class="row">
<form>
<div class="col-md-12 text-center builder-days-title">
<i class="fa fa-arrow-down"></i>
<span> Выбор диапазон расчета программы питания </span>
<i class="fa fa-arrow-down"></i>
</div>
<input type="radio" name="gender" id="Choice1" value="Choice1" checked>
<div class="col-md-12">
<div class="custom-pager builder-days-selector">
<a class="active" data-slide-index="0"> <!-- class = "active"-->
<span class="pager-title">
Пн
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="1">
<span class="pager-title">
Вт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="2">
<span class="pager-title">
Ср
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="3">
<span class="pager-title">
Чт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="4">
<span class="pager-title">
Пт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="5">
<span class="pager-title">
Сб
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a class="active" data-slide-index="6">
<span class="pager-title">
Вс
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
</div>
</div>
<br /><br />
<div class="col-md-12 text-center builder-days-title">
<i class="fa fa-arrow-down"></i>
<span> Выбор конкретных дней для расчета программы питания </span>
<i class="fa fa-arrow-down"></i>
</div>
<input type="radio" name="gender" id="Choice2" value="Choice2">
<div class="col-md-12">
<div class="custom-pager builder-days-selector1">
<a data-slide-index1="0">
<span class="pager-title">
Пн
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="1">
<span class="pager-title">
Вт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="2">
<span class="pager-title">
Ср
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="3">
<span class="pager-title">
Чт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="4">
<span class="pager-title">
Пт
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="5">
<span class="pager-title">
Сб
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
<a data-slide-index1="6">
<span class="pager-title">
Вс
</span>
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>
</div>
</div>
</form>
</div>
var firstDay = 0;
var lastDay = 6;
$('.builder-days-selector a').on('click', function(event) {
var active = $('.builder-days-selector').find('.active').length;
if (active === 0) {
$(event.target.closest('a')).addClass('active');
firstDay = $(event.target.closest('a')).attr('data-slide-index');
} else if (active === 1) {
lastDay = firstDay;
$(event.target.closest('a')).attr('data-slide-index') > firstDay
? lastDay = $(event.target.closest('a')).attr('data-slide-index')
: firstDay = $(event.target.closest('a')).attr('data-slide-index');
for (var i = firstDay; i <= lastDay; i++) {
$("a[data-slide-index=" + i + "]").addClass('active');
}
} else {
$('.builder-days-selector a').removeClass('active');
$(event.target.closest('a')).addClass('active');
firstDay = $(event.target.closest('a')).attr('data-slide-index');
lastDay = firstDay;
}
});
var firstDay = 0;
var lastDay = 6;
$('.builder-days-selector1 a').on('click', function(event) {
var active = $('.builder-days-selector1').find('.active').length;
if (active === 0) {
$(event.target.closest('a')).addClass('active');
firstDay = $(event.target.closest('a')).attr('data-slide-index1');
} else if (active === 1) {
lastDay = firstDay;
$(event.target.closest('a')).attr('data-slide-index1') > firstDay
? lastDay = $(event.target.closest('a')).attr('data-slide-index1')
: firstDay = $(event.target.closest('a')).attr('data-slide-index1');
for (var i = firstDay; i <= lastDay; i++) {
$("a[data-slide-index1=" + i + "]").addClass('active');
}
} else {
$('.builder-days-selector1 a').removeClass('active');
$(event.target.closest('a')).addClass('active');
firstDay = $(event.target.closest('a')).attr('data-slide-index1');
lastDay = firstDay;
}
});