Question

我有一个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');
            }
        });
    });

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

这是从记忆中写的。我没试过。

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

Answer 3

这应该有用，我很抱歉我的回答完全错了，我做了你想要的相反的事情。这是固定版本。

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

Answer 4

快来看看

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

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

以MVC格式验证复选框

5 个答案: