0

Есть форма с выбором варианта ответа, в которой кнопка ответить блокируется до выбора его пользователем.

var form = $('#vote');
if (form.find('button[type="submit"]:disabled')) {
  form.find('input[type="radio"]').click(function() {
    form.find('button[type="submit"]').prop('disabled', false);
    form.find('input[type="radio"]').off('click');
  });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="vote" action="#" method="POST">
  <div class="radio"><label><input type="radio" name="name" value="0">Иванов</label></div>
  <div class="radio"><label><input type="radio" name="name" value="1">Петров</label></div>
  <div class="radio"><label><input type="radio" name="name" value="2">Сидоров</label></div>
  <div><button type="submit" class="btn btn-default" disabled="disabled">Ответить</button></div>
</form>

Хочу данный скрипт переписать под нативный js, чтобы исключить библиотеку jquery. Получаю примерно следующее - если здесь нюансы и ошибки? Не знаю как заменить удаление jquery события методом off()

var form = document.getElementById('vote');
  if form.querySelector('button[type="submit"]:disabled') {
      form.querySelector('input[type="radio"]').addEventListener('click', function() {
          form.querySelector('button[type="submit"]').removeAttribute("disabled");
          form.querySelector('button[type="submit"]').off('click'); 
      });
  }; 

1 ответ 1

2

Например так,аналог off это removeEventListener

const btn = vote.querySelector('.btn')
function enableBtn(e) {
   if(e.target.tagName === 'INPUT') {
     btn.disabled = false;
     vote.removeEventListener('click', enableBtn);
   }
}
vote.addEventListener('click', enableBtn)
<form id="vote" action="#" method="POST">
  <div class="radio"><label><input type="radio" name="name" value="0">Иванов</label></div>
  <div class="radio"><label><input type="radio" name="name" value="1">Петров</label></div>
  <div class="radio"><label><input type="radio" name="name" value="2">Сидоров</label></div>
  <div><button type="submit" class="btn btn-default" disabled="disabled">Ответить</button></div>
</form>

2

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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