ansaurus

Question

Answer 1

A:

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

realshadow 2010-06-04 13:07:39

Answer 2

+1 A:

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

Jan Jongboom 2010-06-04 13:11:30

Just the plain old basic jquery-1.4.2-min.js will work.

Jan Jongboom 2010-06-07 09:04:02

Answer 3

+1 A:

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.

Jakub Lédl 2010-06-04 13:14:27

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 2010-06-07 09:14:30

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

Frode Lillerud 2010-06-12 08:21:38

Answer 4

A:

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"&gt;
    <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>

Martynnw 2010-06-11 12:14:36

Answer 5

A:

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

Ian Oxley 2010-06-11 12:52:43

ansaurus

tags:

views:

answers:

Validate checkboxes in MVC form

related questions