Флажок проверки MVC

#asp.net-mvc

#asp.net-mvc

Вопрос:

Я пытаюсь убедиться, что установлен хотя бы один флажок ввода, в этом списке около 10 элементов, но я не уверен, как это сделать? Нужен ли мне флаг в модели?

  <div>* Data</div>
 @Html.ValidationMessageFor(x => x.flgData,"", new { @class = "text-danger" })
    <ul>
     @foreach (var item in Model.ListOfData)
     {
          <li>
               <input type="checkbox" value="@item.Value" name="chk" />
               <label asp-for="@item.Selected">@Html.Raw(@item.Name)</label>
               <input type="hidden" asp-for="@item.DictionaryId" />
               <input type="hidden" asp-for="@item.Name" />
          </li>
     }
    </ul>
 

Комментарии:

1. Если вы выполняете проверку перед отправкой, вы должны собрать все эти параметры с помощью javascript, а затем подсчитать проверенные элементы.

Ответ №1:

Вы могли бы перебрать все флажки и проверить, установлен ли он

HTML

 <input type="button" id="btnSubmitCB" value="Submit" class="btn btn-primary" />
<input type="checkbox" class="chkbox" value="Bike" /> Bike
<input type="checkbox" class="chkbox" value="Car" /> Car
<input type="checkbox" class="chkbox" value="Boat" /> Boat
 

jQuery ( jQuery )

 $(document).ready(function () { 

    $('#btnSubmitCB').click(function () {
        var cbChecked = false;
        $('input[type=checkbox]').each(function () {
            if (this.checked) {
                cbChecked = true;
                return false;
            }
        });

        if (cbChecked) {
            alert("At least one checkbox is checked");
        }
        else {
            alert("No checkbox is checked");
        }

    });

});
 

Другой способ без использования .каждая функция

 $(document).ready(function () { 
    $('#btnSubmitCB').bind("click", function () {
        let checkedCount = $('input[type=checkbox]:checked').length;
        if (checkedCount == 0) {
            alert("no checkbox has been checked")
        }
        else {
            alert("checkbox has been checked");
        }
    });
});