需要在选择单选按钮上启用提交按钮

need to enable submit button on select of radio button

本文关键字：启用 提交 按钮 单选按钮 选择      更新时间：2023-09-26

我有一个小形式。我希望在选择所有单选按钮时启用提交按钮。

下面是我的代码 HTML 

<form action="#" id="form1" method="post">
                <ul>
                    <li>
                        <h3>Here’s what I want:<strong class="result1"></strong></h3>
                        <div>
                        <span><input type="radio" value="Cash Back rewards" name="want" id="01"  /><label for="01">Cash Back rewards</label></span>
                        <span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
                        <span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
                        <span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
                    </div>
                    </li>
                    <li>
                        <h3>Here’s my credit story: <strong class="result2"></strong></h3>
                        <div>
                        <span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
                            <span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
                        <span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
                        </div>
                    </li>
                    <li>
                        <h3>Here’s what I carry:</h3>
                        <span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
                        <span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>
                    </li>
                </ul>
                <input type="submit" value="" name="" class="find" />
                </form>

我在JavaScript方面很弱，请告诉我。

还有一件事，如果 li 不修复，它将动态生成，所以我必须做什么。 基本上每个 li 都是一个问题，单选按钮是可选的。 所以问题将动态生成，它可以是任何否。 它不是修复

像这样的东西就可以了：

$('#form1 :radio').click(function() {
    var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
    $('#form1 .find').prop('disabled', disabled);
});

这假设您的提交按钮在页面加载时被禁用，因为禁用状态仅在选中某个选项时更改。您当然可以在 DOMReady 期间执行相同的检查（在这种情况下，我会提取侦听器函数），但我更喜欢在加载期间手动设置标记。

演示

disabled变量是通过选择表单中的所有li元素，将其减少到仅满足过滤条件"不包含选中的单选按钮"的元素，并检查缩减集合中是否有任何元素来设置的。

如果您使用的是低于 1.6 的 jQuery 版本，请使用 .attr 而不是 .prop 来设置禁用状态。

相关文章：