How to enable submit buttons only when all radio buttons are selected?

Question

I built a form that has 4 radio button groups as below. It also has 2 submit buttons. I'd like to prevent the user from submitting the form without selecting one radio button per group (ie, 4 radio buttons need to be selected for the form to submit).

I followed prior advice from posts here on SO about this,but they do not seem to work on groups of radio buttons. Do you have any advice on this?

Below is the 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>

The JS:

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

Answer 1

Simply add the attribute "required" to one of the elements of each group. HTML standards have it defined. The browser will take care of the rest.

Refer this similar question