Javascript 如何仅在选中所有单选按钮时启用提交按钮？

我构建了一个包含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>

$（函数（）{
$（“输入[type='radio']”）。更改（函数（）{
$（“input[type='submit']”）prop（“disabled”，false）；
});
});

只需将属性“required”添加到每个组的一个元素中即可。HTML标准定义了它。浏览器将处理其余部分

只需将属性“required”添加到每个组的一个元素中即可。HTML标准定义了它。浏览器将处理其余部分

---

---

您应该订阅表单标签的submit事件，并订阅event.preventDefault（），如果它符合您的标准，则可以阻止提交。如果您愿意，可以使用纯php完成此操作。此HTML是通过在视图中循环生成的（我使用的是CodeIgniter）因此，是的，如果您有建议，请告诉我您可以使用

isset（）

和

count

值的组合。如果其中一个不符合

If（无论您应该订阅表单标记的提交事件，以及event.preventDefault（）的标准，如果它符合您的标准，则阻止提交。如果您愿意，这可以在纯php中完成。此HTML是通过在视图中循环生成的（我使用的是CodeIgniter）因此，如果您有建议，请告诉我您可以使用
isset（）
和
count
的组合来计算值。如果其中一个不符合
的标准，如果（无论我做了什么，正如你所说，启用了提交按钮——我的HTML输出是
——但是提交按钮仍然提交表单——我是否做错了什么？它在这里工作。这一定是因为你的浏览器没有实现此测试。请尝试更新它。或者查看提到的SO问题，然后尝试这些示例。它们都在这里工作。si由于所有这些项目都是在视图上动态生成的，每个组中的每个单选按钮都有
required
属性。这是问题吗？嗯……看起来这是safari（最新版本）问题。它就像你在firefox上所说的那样工作。现在呢？JS解决方案会更保证跨浏览器吗？你知道这个代码段会工作吗？你的解决方案也可以在chrome上工作，因为它是HTML标准，这是实现它的最佳方式。但是大多数浏览器在提供验证实现方面确实落后。我不知道有什么合作伙伴现在删除，但如果我自己找到或最终编写了答案，我会编辑我的答案。是的，我的答案正在chrome和firefox上工作。我按照你说的做了，启用了提交按钮——我的HTML输出是
——但是提交按钮仍然提交表单——我做错了什么吗？它在这里工作。一定是你的浏览器没有实现d此测试。尝试更新它。或者查看提到的SO问题，然后尝试这些示例。它们都在这里工作。由于所有这些项目都是在视图上动态生成的，所以每个组中的每个单选按钮都具有
required
属性。这是问题吗？嗯……看起来这是safari（最新版本）问题。它就像你在firefox上所说的那样工作。现在呢？JS解决方案会更保证跨浏览器吗？你知道这个代码段会工作吗？你的解决方案也可以在chrome上工作，因为它是HTML标准，这是实现它的最佳方式。但是大多数浏览器在提供验证实现方面确实落后。我不知道有什么合作伙伴现在就去，但是如果我自己找到或者最终编码了一个答案，我会编辑我的答案。是的，我的答案正在chrome和firefox上工作。