如何仅在选择所有单选按钮时启用提交按钮？答案

【问题标题】：How to enable submit buttons only when all radio buttons are selected?如何仅在选择所有单选按钮时启用提交按钮？
【发布时间】：2016-06-11 21:58:30
【问题描述】：

我构建了一个包含 4 个单选按钮组的表单，如下所示。它还有 2 个提交按钮。我想防止用户在没有为每组选择一个单选按钮的情况下提交表单（即，需要选择 4 个单选按钮才能提交表单）。

我遵循了关于此问题的帖子的先前建议，但它们似乎不适用于单选按钮组。您对此有何建议？

以下是 HTML：

<form action="http://test/" method="post" accept-charset="utf-8">
<table>
    <tbody>
        <tr>
            <td><label><input type="radio" name="item_6" value="0" class="radio1"> foo</label></td>
            <td><label><input type="radio" name="item_7" value="0" class="radio2"> foo</label></td>
            <td><label><input type="radio" name="item_8" value="0" class="radio3"> foo</label></td>
            <td><label><input type="radio" name="item_9" value="0" class="radio4"> foo</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="1" class="radio1"> bar</label></td>
            <td><label><input type="radio" name="item_7" value="1" class="radio2"> bar</label></td>
            <td><label><input type="radio" name="item_8" value="1" class="radio3"> bar</label></td>
            <td><label><input type="radio" name="item_9" value="1" class="radio4"> bar</label></td>
        </tr>

        <tr>
            <td><label><input type="radio" name="item_6" value="2" class="radio1"> baz</label></td>
            <td><label><input type="radio" name="item_7" value="2" class="radio2"> baz</label></td>
            <td><label><input type="radio" name="item_8" value="2" class="radio3"> baz</label></td>
            <td><label><input type="radio" name="item_9" value="2" class="radio4"> baz</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="3" class="radio1"> hat</label></td>
            <td><label><input type="radio" name="item_7" value="3" class="radio2"> hat</label></td>
            <td><label><input type="radio" name="item_8" value="3" class="radio3"> hat</label></td>
            <td><label><input type="radio" name="item_9" value="3" class="radio4"> hat</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="9" class="radio1"> user</label></td>
            <td><label><input type="radio" name="item_7" value="9" class="radio2"> user</label></td>
            <td><label><input type="radio" name="item_8" value="9" class="radio3"> user</label></td>
            <td><label><input type="radio" name="item_9" value="9" class="radio4"> user</label></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td><button type="submit" disabled="disabled" name="submit_form" value="save_more">
                Save & More</button>
            </td>
        </tr>
        <tr>
            <td><button type="submit" disabled="disabled" name="submit_form" value="save_logout">
                Save & LOGOUT</button>
            </td>
        </tr>
    </tbody>
</table>
</form>

JS：

<script type="text/javascript">
$(function(){
    $("input[type='radio']").change(function(){
        $("input[type='submit']").prop("disabled", false);
    });
    });
</script>

【问题讨论】：

你应该订阅表单标签的提交事件，如果它符合你的条件，你应该订阅 event.preventDefault() 来阻止提交。
如果你愿意的话，这可以在纯 php 中完成。
此 HTML 是通过在视图中循环生成的（我使用的是 CodeIgniter）所以是的，如果您有任何建议，请告诉我
您可以使用isset() 和count 值的组合。如果其中一个不符合if(whatever <= x_integer){...} 的标准（做某事），这是您可以使用的逻辑。可能使用带有键/对值的foreach。

标签： javascript php jquery html forms

【解决方案1】：

只需将“必需”属性添加到每个组的元素之一。 HTML 标准对其进行了定义。浏览器会处理剩下的事情。

Refer this similar question

【讨论】：

我按照你说的做了，启用了提交按钮——我的 HTML 输出是<input type="radio" name="item_6" value="2" required class="radio1" />——但是提交按钮仍然提交表单——我做错了什么吗？
它在这里工作。一定是你的浏览器没有实现这个测试。尝试更新它。或查看提到的 SO 问题，并尝试这些示例。他们都在这里工作。
由于所有这些项目都是在视图上动态生成的，因此每个组中的每个单选按钮都具有required 属性。有问题吗？
好吧...看起来这是一个 safari（最新版本）问题。它就像你在 Firefox 上所说的那样工作。现在怎么办？ JS 解决方案是否更能保证跨浏览器？知道sn-p会起作用吗？您的解决方案也适用于 chrome，顺便说一句
既然是HTML标准，这是最好的实现方式。但是大多数浏览器确实缺乏提供验证的实现。我现在不知道任何代码，但如果我找到或最终自己编写一个代码，我会编辑我的答案。是的，我正在开发 chrome 和 firefox。