Question

I have a table in an ASP.NET MVC2 form. On each row in the table there is a checkbox.
Underneath the table there is a submitbutton.

I want to make the button disabled when NONE of the checkboxes are selected.

<% using Html.BeginForm(....) { %>
<table>
<% foreach (var item in Model) { %>
    <tr> <td>
    <input type="checkbox" name="selectedContacts" />
    </td></tr>
<% } //End foreach %> 
</table>
<% } //End using %> 

<input type="submit" value="Create selection" name="CreateSelectionAction" />

The number of lines/checkboxes will vary from 1 to many.

How can I use MVC2/jQuery to require the user to selected minimum one checkbox before clicking Submit button?

Edit; Of the three answers below I couldn’t get any of them to work. Nothing happens when clicking the checkboxes, and no Javascript errors are raised. Setting up a small bounty.

EDIT2; Here is what I ended up with.
I gave the form the name createSelectionForm, and used this jQuery.

    $(document).ready(function () {
        $('#createSelectionForm, input[type="checkbox"]').click(function () {
            if ($('#createSelectionForm, input[type="checkbox"]:checked').length == 0) {
                $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
            } else {
                $('input[name="CreateSelectionAction"]').removeAttr('disabled');
            }
        });
    });

Answer 1

Try this:

<script type="text/javascript">
  $(document).ready(function() {
    $('#form-id input[type="checkbox"]').change(function() {
      if ($('#form-id input[type="checkbox"]:checked').length == 0) {
        $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
      } else {
        $('input[name="CreateSelectionAction"]').removeAttr('disabled');
      }
    });
  });
</script>

This was too written from memory. I didn’t try it.