javascript - 检查至少一个复选框已选中 jquery Validate

Question

我的 asp.net mvc razor View 中有以下部分，用于生成复选框列表。我希望能够验证至少一项已被勾选。

<div class="form-group">
  <div class="row col-md-12 ">
    <div class=" col-md-11 col-md-offset-1">
      @for (int i = 0; i < Model.PeronsExpList.Count(); i++)
      {
        <div class="col-md-12">
          @Html.HiddenFor(x => Model.PeronsExpList[i].PeronExpId)
          @Html.CheckBoxFor(x => Model.PeronsExpList[i].selected, new { @class = "{peopleExp: true}", @name = "peopleExp"})
          @Html.DisplayFor(x => Model.PeronsExpList[i].PeronName, Model.PeronsExpList[i].PeronName)
        </div>
      }
    </div>
  </div>
</div>

我有以下 JavaScript 来提供此功能:

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript">

  $.validator.addMethod("peopleExp", function (value, elem, param) {
    if ($(".peopleExp:checkbox:checked").length > 0) {
      return true;
    } else {
      return false;
    }
  }, "You must select at least one!");

  </script>
}

但是，当我测试它时，即使没有勾选，它也可以让我提交页面。

Answer 1

感谢@AmitSingh 链接资源来解决此问题

View 修改为:

        <div class="form-group">
        <div class="row col-md-12 ">
            <div class=" col-md-11 col-md-offset-1">
                @for (int i = 0; i < Model.PeronsExpList.Count(); i++)
                {
                    <div class="col-md-12">
                        @Html.HiddenFor(x => Model.PeronsExpList[i].PeronExpId)
                        @Html.CheckBoxFor(x => Model.PeronsExpList[i].selected, new { @type = "checkbox"})
                        @Html.DisplayFor(x => Model.PeronsExpList[i].PeronName, Model.PeronsExpList[i].PeronName)
                    </div>
                }
            </div>
        </div>
    </div>

提交按钮更改为:

<input type="submit" name="Submit" value="Add Control Measure" class="btn btn-primary" disabled />

Javascript 修改为:

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">

    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");

    checkboxes.click(function () {
        submitButt.attr("disabled", !checkboxes.is(":checked"));
    })
</script>
}