Validate checkboxes in MVC form

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');
            }
        });
    });

Hey, I fixed my answer, since the last time I missread your question and wrote total BS. :) — realshadow
– realshadow, Commented Jun 11, 2010 at 12:50

Jakub Lédl · Accepted Answer · 2010-06-04 13:14:27Z

3

+100

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.

answered Jun 4, 2010 at 13:14

Jakub Lédl

1,8053 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frode Lillerud Over a year ago

I'm having trouble getting these to work. I added an alert("") in the beginning of the function, and I see it is called when the page is loaded, but nothing happens when I click on the checkboxes. The button is never disabled.

Frode Lillerud Over a year ago

Got it working - I didn't notice that "form-id" had to be replaced.

Jan Jongboom · Accepted Answer · 2010-06-04 13:11:30Z

2

This basically does:

Add a handler to the selectboxes
In the handler, check how many are selected
If 0 then disable the button
If !0 then enable the button

$('input[name="selectedContacts"]').click(function() {
    var $button = $('input#CreateSelectionAction');
    if($('input[name="selectedContacts"]:checked').length === 0) {
         $button.removeAttr('disabled');
    } else {
         $button.attr('disabled','disabled');
    }
}

answered Jun 4, 2010 at 13:11

Jan Jongboom

27.5k10 gold badges85 silver badges121 bronze badges

Comments

Martynnw · Accepted Answer · 2010-06-11 12:14:36Z

Have a go at this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Checkbox Demo</title>
        <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
        <script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <h1>Checkbox Demo</h1>
            Checkbox 1: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 2: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 3: <input type="checkbox" class="validatecheckbox" /><br />
            Checkbox 4: <input type="checkbox" class="validatecheckbox" /><br />

            <input type="submit" value="Create selection" id="createselection" />
        </form>

    <script type="text/javascript">
        $(document).ready(Initialize);

        function Initialize() {
            $(".validatecheckbox").change(Validate);
            Validate();
        };

        function Validate() {
            var valid = false;

            valid = $(".validatecheckbox:checked").length > 0;

            if (!valid) {
                $("#createselection").attr("disabled", true);
                return false;
            }
            else {
                $("#createselection").attr("disabled", false);
                return true;
            }
        }
    </script>
    </body>
    </html>

realshadow · Accepted Answer · 2010-06-11 12:49:33Z

This should work, I am sorry that my answer was totally wrong, I did the opposite thing of what you wanted. Here is the fixed version.

When the DOM is ready it will check all checkboxes in your table. If at least one of them is selected it will disable the submit button. When you click one of the checkboxes it will enable it again and if you will de-check it, it will check the other checkboxes as well and if none of them is selected it will disable it.

$.checker = function() {
    $('table input[type="checkbox"]').each(function() {
        if(!$(this).is(':checked')) {
            $('input[name="CreateSelectionAction"]').attr('disabled', 'disabled');
        }                   
    });
}

$(document).ready(function() {
    $.checker();

    $('input[type="checkbox"]').click(function() {
        if($(this).is(':checked')) {
            $('input[name="CreateSelectionAction"]').removeAttr('disabled');
        } else {
            $.checker();
        }
    });             
});

Ian Oxley · Accepted Answer · 2010-06-11 12:52:43Z

This works for me:

$(function() {
    if ($('table input[type="checkbox"]:checked').length == 0) {
        $('input[type="submit"]').attr('disabled', 'disabled');
    }

    $('table input[type="checkbox"]').click(function() {
        if ($('table input[type="checkbox"]:checked').length == 0) {
            $('input[type="submit"]').attr('disabled', 'disabled');
        } else {
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
})();

Collectives™ on Stack Overflow

Validate checkboxes in MVC form

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related