JSFiddle - React, Tailwind, and code Playground

by isqua

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 firmware = document.querySelector('#firmware2');
var stamping = document.querySelectorAll('[name="stamping"]');
var eyelet = document.querySelector('#eyelet-color');
var rubber = document.querySelectorAll('[name="rubber-flat"]');
// И кнопку, состояние которой будем менять
var button = document.querySelector('.button__to3');

/**
 * Функция проверяет, выбран ли хотя бы один из радио
 * @param {NodeList} radioList Коллекция элементов радио
 * @returns {Boolean} Возвращает true, если хотя бы один радио отмечен
 */
function checkRadio(radioList) {
  for (var i = 0; i < radioList.length; i++) {
    if (radioList[i].checked) {
      return true;
    }
  }

  return false;
}

// Слушаем изменения
document.addEventListener('change', function() {
  // Если хотя бы один из перечисленных инпутов выбран, запишем в переменную true
  var isAtLeastOneThingChecked = firmware.checked || eyelet.checked || checkRadio(stamping) || checkRadio(rubber);

  // Раздизаблим кнопку, если хотя бы один пункт выбран
  button.disabled = ! isAtLeastOneThingChecked;
});