MVC4 Jquery 验证复选框以检查至少一个？

Question

我正在实现一个让用户选择的复选框问题。但是，如果管理员将问题强制设置为 true，则复选框必须 select 至少 1 才能提交，否则一条消息将提示用户 select。尝试了 jquery 但是当点击按钮时，没有任何反应。

我有什么错误吗？

我的看法：

    @model List<IFXSurveyTool.Models.AnswerQuestionViewModel>

    <script>

            var messageContainer = $('.errormessage');

            $('#save').click(function () {
                // Get all mandatory containers
                var mandatory = $('.mandatory');
                $.each(mandatory, function () {
                    var numChecked = $(this).find('input:checked').length;
                    if (numChecked === 0) {
                        messageContainer.text('At least one checkbox must be selected.');
                        return false;
                    }
                });
            });

            $('.mandatory').on('click', 'input[type="checkbox"]', function () {
                messageContainer.text('');
            });


    </script>

    <br />
    <h2>Questions</h2>
    <br />

    @using (Html.BeginForm())
    {
        <div class="errormessage"></div>
           <div class="checkboxcontainer mandatory">
              @for (int x = 0; x < Model[i].Choice_SubQuestion.Count(); x++)
                  {


                           <input type="checkbox" name="[@i].MultiAnswer[@x]" value="@Model[i].Choice_SubQuestion[x]" />
                           @Html.HiddenFor(m => m[i].MultiAnswer[x])
                           @Html.LabelFor(m => m[i].MultiAnswer[x], Model[i].Choice_SubQuestion[x].ToString(), new { @class = "questionlist1" })



         }
  </div>

    <button type="button" id="save">Save</button> 
}

在 HTML 中生成复选框后：

<div class="checkboxcontainer mandatory">
<input type="checkbox" name="[0].MultiAnswer[0]" value="1">
<input name="[0].MultiAnswer[0]" type="hidden" value="">
<label class="questionlist1" for="">1</label>
<input type="checkbox" name="[0].MultiAnswer[1]" value="2">
<input name="[0].MultiAnswer[1]" type="hidden" value="">
<label class="questionlist1" for="">2</label>
<input type="checkbox" name="[0].MultiAnswer[2]" value="3">
<input name="[0].MultiAnswer[2]" type="hidden" value="">
<label class="questionlist1" for="">3</label>
</div>

Answer 1

首先，您提供所有包含 <div> 的元素 class="mandatory" 并且仅在 Model[i].Mandatory 为 true 时才生成复选框，因此您 html 应该是

for (int x = 0; x < Model[i].Choice_SubQuestion.Count; x++)
{
  @{var attributes = Model[i].Mandatory ? "checkboxgroup mandatory" : "checkboxgroup";}
  <div class="@attributes">
    <div class="message></div>
    <input type="checkbox" name="[@i].MultiAnswer[@x]" value="@Model[i].Choice_SubQuestion[x]" />
    @Html.HiddenFor(m => m[i].MultiAnswer[x])
    @Html.LabelFor(m => m[i].MultiAnswer[x], Model[i].Choice_SubQuestion[x].ToString(), new { @class = "questionlist1" })
  </div>
}
<input value="Submit" type="submit" class="btn" id="save" />

接下来，您的按钮是一个提交按钮，因此表单实际上是在提交（在错误消息有机会变得可见之前）。将脚本更改为

$('#save').click(function() {
  var canSubmit = true;
  // Get all mandatory containers
  var mandatory = $('.mandatory');
  $.each(mandatory, function() {
    var numChecked = $(this).find('input:checked').length;
    if (numChecked === 0) {
      canSubmit = false; // signal we can't submit
      // display error message;
      $(this).children('.message').text('At least one checkbox must be selected');

      return false; // exit the loop
    }
  });
  if (!canSubmit) {
    return false; // cancel the default submit
  }
});

$('.mandatory').on('click', 'input[type="checkbox"]', function() {
  $(this).closest('.mandatory').children('.message').text(''); // clear any existing error message
});

另请注意，脚本必须位于页面底部（紧接在结束 </body> 标记之前）或包含在 $(document).ready() { ..... } 或 $(function() { ..... }); 中（shorthand 版本).

MVC4 Jquery 验证复选框以检查至少一个？

MVC4 Jquery validate checkbox to check at least one?

javascript

checkbox

jquery

requiredfieldvalidator

asp.net-mvc-4