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

Question

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

Answer 1

只需将属性“required”添加到每个组的元素之一即可。 HTML 标准已经定义了它。浏览器将处理剩下的事情。

Refer this similar question