Как доработать функционал опросника (теста) на JS?
Всем привет, есть готовая структура
$(".js-tab-item").not(":first-child").hide();
$(".js-tab").click(function() {
if (!$(this).hasClass('active')) {
var tabsContainer = $(this).closest(".js-tabs"),
tabs = tabsContainer.find(".js-tab"),
tabsItems = tabsContainer.find(".js-tab-item");
tabs.removeClass("active").eq($(this).index()).addClass("active");
tabsItems.hide().eq($(this).index()).fadeIn(1)
}
}).eq(0).addClass("active");
.tables__tabs {
display: flex;
}
.tables__tab {
margin: 0 20px;
color: #ccc;
}
.tables__tab:first-of-type {
margin-left: 0;
}
.tables__tab.active {
color: #ff0000;
}
.result {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tables">
<div class="tables__wrap js-tabs">
<div class="tables__tabs">
<div class="tables__tab js-tab active">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 1</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 2</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 3</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 4</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 5</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 6</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
<div class="tables__tab js-tab">
<div class="tab_item">
<div class="tab_item__ico">
<span></span>
</div>
<!-- /.tab_item__ico -->
<div class="tab_item__txt">Вопрос 7</div>
<!-- /.tab_item__txt -->
</div>
<!-- /.tab_item -->
</div>
</div>
<div class="tables__items">
<div class="tables__item js-tab-item">
<div> <input type="radio" name="one" value="Да"> Да </div>
<div><input type="radio" name="one" value="Нет"> Нет </div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two" value="Свет"> Свет </div>
<div> <input type="checkbox" name="three" value="Тьма"> Тьма</div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two1" value="Свет1"> Свет1 </div>
<div> <input type="checkbox" name="three1" value="Тьма1"> Тьма1</div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two2" value="Свет2"> Свет2 </div>
<div> <input type="checkbox" name="three2" value="Тьма2"> Тьма2</div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two3" value="Свет3"> Свет3 </div>
<div> <input type="checkbox" name="three3" value="Тьма3"> Тьма3</div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two4" value="Свет4"> Свет4 </div>
<div> <input type="checkbox" name="three4" value="Тьма4"> Тьма4</div>
</div>
<div class="tables__item js-tab-item">
<div><input type="checkbox" name="two5" value="Свет5"> Свет5 </div>
<div> <input type="checkbox" name="three5" value="Тьма5"> Тьма5</div>
</div>
</div>
<div class="buttons">
<button class="prev">Назад</button>
<button class="next">Далее</button>
<button class="result">Рузельтат</button>
</div>
</div>
</div>
Yе могу понять как к табам прикрутить кнопки (влево, вправо).
Кнопка далее должна по умолчанию иметь атрибут disabled, пока в контенте не активировали checkbox или радио button. На первой вкладке кнопки назад не должно быть. Так же в самих табах каждая новая вкладка должна подсвечиваться красным, сейчас только активная подсвечивается, и должна подсвечиваться после того как нажали кнопку далее. На последнем экране должна показываться кнопка Результат и Назад.
Сами табы (Вопрос 1 и тд) нажимать нельзя