Пока не выбраны радио кнопки, кнопка отправки неактивна?

Question

[Gorila Lopster]

Допустим есть 3 блока с радиокнопками (в каждом блоке от 10).
Кнопка button неактивна (со своими стилями, лучше если кроссбраузерное решение, disabled вроде бы в safari не поддерживается).
Нужно сделать так, чтобы кнопка стала активной (сменить стиль цвет), если выбран радиобатон в каждом из блоков, если в одном из блоков не выбран радиобатон то кнопка не активна?

<form action="#">
  <div class="category">
      <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn no" name="smile">
    <span class="icon-smile-sad"></span>
    <span>конь</span>
              <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn no" name="smile">
    <span class="icon-smile-sad"></span>
    <span>пёс</span>
  </label>
  </div>
<div class="podcategory">  <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn yes" name="smile" >
    <span class="icon-smile"></span>
    <span>дерево</span>
  </label>
  <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn yes" name="smile" >
    <span class="icon-smile"></span>
    <span>трава</span>
  </label>
 </div>
<div class="zacategory">  <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn yes" name="smile" >
    <span class="icon-smile"></span>
    <span>завод</span>
  </label>
 <label class="wrap-radio-btn">
    <input type="radio" value="" class="radio-btn yes" name="smile" >
    <span class="icon-smile"></span>
    <span>магазин</span>
  </label>
    </div>

  <button type="submit" class="btn-main" disabled>
    <span>Следующий вопрос  >></span>
  </button>
</form>

Comments

[Дмитрий]

Причём тут php?

Answer 1

[DanKud]

Почему у вас все радиокнопки имеют одно и тоже name если вы их разделяете на 3 категории?
Кроме disabled можно сделать еще так:

1. Можно через pointer-events, но не поддерживает IE ниже 11 версии - https://codepen.io/anon/pen/KEojBR
2. Можно блокировать действие браузера при нажатии на кнопку через event.preventDefault(), а затем убирать событие при выполнение условия - https://codepen.io/anon/pen/VRXJOj, но в этом случае визуальный эффект от нажатия на кнопку будет виден даже когда она неактивна.