验证 MVC 表单中的复选框答案

【问题标题】：Validate checkboxes in MVC form验证 MVC 表单中的复选框
【发布时间】：2010-06-04 13:02:43
【问题描述】：

我有一个 ASP.NET MVC2 形式的表。表格中的每一行都有一个复选框。在表格下方有一个提交按钮。

我想在未选中任何复选框时禁用按钮。

<% 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" />

行/复选框的数量从 1 到多个不等。

如何使用 MVC2/jQuery 要求用户在点击提交按钮之前至少选中一个复选框？

编辑；在下面的三个答案中，我无法让它们中的任何一个起作用。单击复选框时没有任何反应，并且不会引发 Javascript 错误。设置一个小赏金。

EDIT2;这就是我最终得到的。我将表单命名为 createSelectionForm，并使用了这个 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');
            }
        });
    });

【问题讨论】：

嘿，我修正了我的答案，因为我上次错过了你的问题并写了完整的 BS。 :)

标签： jquery asp.net-mvc validation

【解决方案1】：

试试这个：

<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>

这也是凭记忆写的。我没试过。

【讨论】：

我无法让这些工作。我在函数的开头添加了一个 alert("") ，我看到它在页面加载时被调用，但是当我点击复选框时没有任何反应。该按钮永远不会被禁用。
搞定 - 我没有注意到必须替换“form-id”。

【解决方案2】：

这基本上可以：

向选择框添加处理程序
在处理程序中，检查有多少被选中
如果0 则禁用该按钮
如果 !0 则启用按钮

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

【讨论】：

【解决方案3】：

试试这个

<!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>

【讨论】：

【解决方案4】：

这应该可行，很抱歉我的回答完全错误，我做了与您想要的相反的事情。这里是固定版本。

当 DOM 准备就绪时，它会检查表格中的所有复选框。如果至少选择其中一个，它将禁用提交按钮。当您单击其中一个复选框时，它将再次启用它，如果您取消选中它，它也会检查其他复选框，如果没有选中它们，它将禁用它。

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

【讨论】：

【解决方案5】：

这对我有用：

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

【讨论】：