dimanche 12 juin 2016

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

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>

Aucun commentaire:

Enregistrer un commentaire