javascript - 使用 jquery 对复选框列表进行验证

Question

我有一个 ASP.Net Core 应用程序，它有多个复选框列表，我需要检查每个复选框是否至少选择了一个选项。

这就是我的观点:

for (int i = 0; i < Model.Fruits.Count; i++)
{
    <input asp-for="Fruits[i].Selected" type='checkbox' class="chkbox" />
}
<text>@Model.Fruits[i].FruitText</text>   
<span class="text-danger"></span>


for (int i = 0; i < Model.Vegetables.Count; i++)
{
    <input asp-for="Vegetables[i].Selected" type='checkbox' class="chkbox" />
}
<text>@Model.Vegetables[i].VegetablesText</text>   
<span class="text-danger"></span>

for (int i = 0; i < Model.Flowers.Count; i++)
{
    <input asp-for="Flowers[i].Selected" type='checkbox' class="chkbox" />
}
<text>@Model.Flowers[i].FlowersText</text>   
<span class="text-danger"></span>

所以我尝试了这样的事情。

 $("#btnSave").on("click", function () {

    $(".chkbox").each(function () {
        if($(this).is(':checked') == false)
        {
            $(this).closest('span').text("Please select atleast one option");
            return
        }
    });

    $("#form").submit();
});

那么我该如何更改我的脚本呢？或者是否需要更改我的 View /模型的结构？

Answer 1

您可以尝试的一件事是将所有复选框列表包装在 div 中，然后迭代这些 div 以查看是否至少有一个 复选框 已检查。如果每个 div 至少有一个复选框被选中，则您提交表单。

<div class="chkbox-list">
for (int i = 0; i < Model.Fruits.Count; i++)
{
    <input asp-for="Fruits[i].Selected" type='checkbox' class="chkbox" />
    <text>@Model.Fruits[i].FruitText</text> 
}
    <span class="text-danger"></span>
</div>

... other divs for Vegetables and Flowers

然后就可以遍历所有div的了，如下:

$('#btn-save').on('click', function() {
  let atLeastOneCheckedPerDiv = true
  $('.chkbox-list').each(function() {
    let div = $(this)
    let countChecked = div.find('.chkbox').filter(function() {
      return $(this).is(":checked")
    }).length
    if (countChecked === 0) {
      // show error message
      div.find('.text-danger').text('Please select at least one option')
      atLeastOneCheckedPerDiv = false
    }
  })
  if (atLeastOneCheckedPerDiv) {
      // submit form
  }
})