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()方法

Answer 2

我认为你不应该抓住'click'事件，而是'change'事件。

$("input.radio").on('change', function () {
...
}

或

$("input.radio").change(function () {
    ...
}

Answer 3

我使用了Satpals的答案，但使用jQuery提供的.is()函数进行了一些更改

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

或者您甚至可以使用$(this)

$('input.radio').on('change', function () {
    $('#id_vote_button').prop('disabled', $(this).is(':checked'));
});

如何在单击按钮上使按钮无效？

3 个答案: