0

Как сделать <input class="btn"... активным при установке флажка на checkbox, и наоборот? т.е удалить disabled=""

<input id="form" required="" type="checkbox">
<label for="form">
Отправляя сообщение, я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта
</label>

<input class="btn" value="Заказать" type="submit" disabled="">

2 ответа 2

3

Можно достать атрибут и назначать ему true или false написал на js и на jquery

//JavaScript
form.onchange = function(){
  var button = document.body.getElementsByClassName('btn')[0];
  if(button.disabled) button.disabled = false;
  else button.disabled = true;
}

//Jquery
$('#form').on('change', function(){
  if($(this).is(':checked')) $('.btn').attr('disabled', false);
  else $('.btn').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="form" required="" type="checkbox">
<label for="form">
Отправляя сообщение, я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта
</label>

<input class="btn" value="Заказать" type="submit" disabled="">

8
  • $('.btn').attr('disabled', !$(this).is(':checked'))
    – Qwertiy
    11 авг 2017 в 15:00
  • Кстати, jQuery вроде не просили.
    – Qwertiy
    11 авг 2017 в 15:01
  • Да можно и jQuery, как надежнее?
    – steep
    11 авг 2017 в 15:03
  • @steep, при такой простой задаче и отсутствии IE8- совершенно без разницы.
    – Qwertiy
    11 авг 2017 в 15:04
  • Использовать 'onchange', тем более для формы, плохо.
    – Qwertiy
    11 авг 2017 в 15:10
2

document.getElementById('allow').addEventListener('change', function (e) {
  document.getElementById('submit').disabled = !e.target.checked
})
<form>
  <label><input type=checkbox id=allow> Разблокировать кнопку</label>
  <input type=submit id=submit value=Отправить disabled>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.