JSFiddle - React, Tailwind, and code Playground
HTML
<div data-taba="2" class="constructor__tab constructor__tab2">
<div class="constructor__main">
<div class="constructor__cover-type constructor__cover-type_flex constructor__cover-type_label-font"> <span class="inp-label">Варианты обложки</span>
<div data-id="var-cover" data-taba="1" class="inpbox inpbox1">
<input type="radio" class="combo-off" id="simple" name="cover-types" value="simple">
<label for="simple">Простая</label>
</div>
<div data-id="var-cover" data-taba="2" data-class_2="basis-material" data-taba_2="1" class="inpbox">
<input class="combo-main-tab flex-checked_disabled" type="radio" id="combo" name="cover-types" value="combo">
<label for="combo">Комбинированная</label>
</div>
<div data-id="var-cover" class="inpbox">
<input type="radio" class="combo-off" id="full-color" name="cover-types" value="full-color">
<label for="full-color">Полноцветная</label>
</div>
</div><!--constructor__combo-type-->
<div class="constructor__cover-type constructor__cover-type_flex constructor__cover-type_label-font constructor__cover-type_nomgb flex-checked"> <span class="inp-label">Дополнительные опции обложки</span>
<div class="inpbox inpbox1">
<input class="varRadio firm-around" value="1000" type="checkbox" id="firmware2" name="firmware-around">
<label for="firmware2">Прошивка по периметру</label>
</div>
</div>
<!--constructor__cover-type-->
<div class="constructor__cover-type constructor__cover-type_flex constructor__cover-type_label-font constructor__cover-type_bord-top"> <span class="inp-label">Тиснение</span>
<div class="inpbox inpbox1">
<input class="varRadio var7" value="1000" type="radio" id="blint" name="stamping">
<label data-class="clishe" data-taba="1" for="blint">Блинтовое</label>
</div>
<div class="inpbox">
<input class="varRadio var8" value="1000"...
CSS
/****COLORS****/
.c-4700 {
background: #5c3135; }
.c-4916 {
background: #c89777; }
.c-4890 {
background: #20367d; }
.c-4872 {
background: #a31120; }
.c-4741 {
background: #e35d3b; }
.c-4720 {
background: #1d5340; }
.c-4716 {
background: #2d376b; }
.c-4714 {
background: #90513f; }
.a967 {
background: #b5bd87; }
.b920 {
background: #dd3259; }
.b923 {
background: #7679a3; }
.d162 {
background: #b8e759; }
.d512 {
background: #ababac; }
.d519 {
background: #868789; }
.e280 {
background: #ffce2f; }
.e478 {
background: #1dd047; }
.e480 {
background: #70385f; }
.f002 {
background: #e44d8d; }
.f003 {
background: #2d9ad5; }
.nero {
background: #000000; }
.white {
background: #f9f9f9; }
.a278 {
background: #265033; }
.a322 {
background: #673a27; }
.a324 {
background: #7a2638; }
.a325 {
background: #2f3962; }
.a330 {
background: #c1955f; }
.a331 {
background: #89878c; }
.b561 {
background: #753b15; }
.b562 {
background: #4c1e18; }
.b564 {
background: #8b1818; }
.b566 {
background: #2b472e; }
.b568 {
background: #2f3c4c; }
.a370 {
background: #5f3234; }
.a279 {
background: #743e2a; }
.c-4872 {
background: #cd2c29; }
.c-4890 {
background: #324394; }
.d613m {
background: #dcdcdc; }
.f355 {
background: #435394; }
.f358 {
background: #808074; }
.f359 {
background: #595956; }
.c-4401 {
background: #f9e99a; }
.c-4407 {
background: #bebebe; }
.a737 {
background: #457ee8; }
.e324 {
background: #88724c; }
.e328 {
background: #533329; }
.e329 {
background: #5c1725; }
.e331 {
background: #212d41; }
.e332 {
background: #444444; }
.e337 {
background: #156549; }
.e044 {
background: #d0449f; }
.f311 {
background: #ffce2f; }
.f313 {
background: #1390e4; }
.f319 {
background: #37ca32; }
.b633m {
background: #00b271; }
.b634m {
background: #63888b; }
.b636m {
background: #695075; }
.c-077 {
background: #f0f0f0; }
.a220 {
...
JavaScript
var stepSecond = [];
stepSecond[1] = $('#firmware2').prop('checked');
stepSecond[2] = $('[name="stamping"]').prop('checked');
stepSecond[3] = $('#eyelet-color').prop('checked');
stepSecond[4] = $('[name="rubber-flat"]').prop('checked');
$(document).on('change', function () {
if ($(stepSecond == 'true')) {
console.log(stepSecond);
$('.button__to3').prop('disabled', 'false');
}
});