Для проверки списка флажков с помощью jquery

Question

У меня есть основное приложение ASP.Net, у которого есть несколько списков флажков, и мне нужно проверить, не выбрано ли для каждого из них хотя бы один выбранный параметр.

Итак, это мое мнение:

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

Так как мне изменить мой сценарий? Или нужно изменить структуру моего вида / модели?

Answer 1

Одна вещь, которую вы можете попробовать, - обернуть все свои списки флажков в div's, а затем выполнить итерацию по этим div's, чтобы посмотреть, является ли хотя бы один из checkboxes checked. Если у каждого div есть хотя бы один checkbox, то это checked вас submit form.

<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's следующим образом:

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