javascript - 如何在单击单选按钮时使按钮处于非事件状态？

Question

我想让提交按钮处于非事件状态(不可点击)，直到选中表单的单选按钮之一。

这是我目前所拥有的:

{% 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>

问题是当我点击单选按钮时，$("input.radio").on('click', function () 不会对控制台产生任何影响。

Answer 1

您需要设置按钮的disabled 属性，这可以通过使用.prop() 来实现。方法并使用正确的选择器 :radio 来定位单选元素。

$(":radio").on('change', function () {
    $("#id_vote_button").prop('disabled', $('form.poll :radio:checked').length == 0);
});

我建议您使用 change 事件而不是 click

注意:jQuery 中没有定义setAttribute() 方法