Не активная кнопка в HTML с помощью атрибута CSS disabled

В этой статье мы рассмотрим как сделать кнопку не активной, при не выполнении определенных условий в форме отправки данных на сайте. Напишем код для кнопки подтверждающей «Согласие на обработку персональных данных», данная тема сейчас востребована в связи с введение закона о «Персональных данных». То есть пока клиент при отправке формы не установит чекбокс напротив надписи «Согласие на обработку персональных данных», кнопка отправки будет не активна.




<div class="check-policy">
	<input type="checkbox" id="policy" name="Согласие на обработку данных" value="Согласен">
	<label for="policy">Согласие на обработку персональных данных</label>
</div>



<button id="submit" disabled>Отправить</button>

Зададим тегу <button> значение disabled, которое задает не активность кнопки «Отправить». И немного украсим нашу кнопку и <input> type «checkbox» с помощью CSS.


body {
background-color: #1684af;
color: #fff;
}
label {
margin-bottom: 8px;
font-size: 13px;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked)
{
position: absolute;
left: -9999px;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label{
display: inline-block;
position: relative;
padding-left: 20px;
line-height: 1;
cursor: pointer;
}

input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 12px;
height: 12px;
background-color: #ffffff;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
content: "";
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
left: 1px;
top: 1px;
width: 2px;
height: 2px;
border: 4px solid #F2622E;
}

input[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
}

input[type="checkbox"]:checked + label:after {
opacity: 1;
}
.check-policy {
font-size: 13px;
}
.btn {
padding: 0.75em 1.75em;
display: inline-block;
line-height: 1;
margin: 2em 0;
color: #fff;
background-color: #F2622E;
border: none;
}
.btn:hover {
cursor: pointer;
}
.btn:disabled, .btn:hover:disabled {
background-color: rgba(0,0,0,.1);
border: 1px solid rgba(0, 0, 0, .1);
cursor: not-allowed;
}

А теперь добавим к input JS событие:



<div class="check-policy">
  <input type="checkbox" id="policy" name="Согласие на обработку данных" value="Согласен" onchange="document.getElementById('submit').disabled = !this.checked;">
  <label for="policy">Согласие на обработку персональных данных</label>
</div>

<button id="submit" class="btn" disabled>Отправить</button>

что бы при нажатии на строчку с «Согласие на обработку персональных данных» кнопка «Отправить» стала активной.