I want to make a submit button inactive (not clickable) until one of form's radio buttons is checked.
This is what I have so far:
{% for answer in form.poll.answers.all %}
<p class='field radio question'>
<input id='{{ form.answer.auto_id }}_{{ answer.pk }}' type='radio' name='{{ form.answer.html_name }}' value='{{ answer.pk }}' />
<label for='{{ form.answer.auto_id }}_{{ answer.pk }}'>
<em>{{ answer }}</em>
</label>
</p>
{% endfor %}
<button class='buttons' type='submit' id='id_vote_button'>{% trans "Vote" %}</button>
<script src='{% static 'scripts/libs/jquery.js' %}'></script>
<script>
$("input.radio").on('click', function () {
console.log("click test");
if ($('form.poll input.radio:checked')[0]) {
console.log("true test");
$("#id_vote_button").setAttribute('active', true);
}
else {
console.log("false test");
$("#id_vote_button").setAttribute('active', false);
}
});
</script>
The problem is the $("input.radio").on('click', function () does not cause any effect in console when I click on radio buttons.