如何在单选按钮单击时使按钮无效？

Posted 2023-02-24

【中文标题】如何在单选按钮单击时使按钮无效？

【英文标题】：How do I make a button inactive on radio button click?

【发布时间】：2017-12-24 16:46:29

【问题描述】：

我想让提交按钮处于非活动状态（不可点击），直到选中表单的单选按钮之一。

这是我目前所拥有的：

% 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 () 在控制台中没有任何影响。

【问题讨论】：

$(".radio input").on('click', function()console.log(1))...试试这个...让我们知道

【参考方案1】：

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

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

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

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

【参考方案2】：

我认为你不应该捕捉 'click' 事件，而应该捕捉 'change' 事件。

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

或

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

【参考方案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'));
);