检查是否在MVC C＃和jQuery [duplicate]中提交表单之前选中了复选框

Posted 2021-05-06

这个问题在这里已有答案：

• jQuery Validation at least one checkbox is selected 5个答案

起初我有这个MVC视图，显示数据库中的特定记录列表，这是代码，你可以看到有一个复选框列

 <tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                @html.DisplayFor(modelItem => item.numero_documento)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_empresa)
                                            </td>
                                            <td>
                                                <input type="checkbox" name="code" value="@item.numero_documento" +"a" />
                                            </td>
                                        </tr>
                                    }
                                </tbody>

当按下提交按钮时，它会进行验证，必须至少检查一个复选框，如下所示

$("#btn-agrupar").click(function (e) {
    if ($("input[type='checkbox']").is(':checked') === true)
        $("#FormAgrupar").submit();
    else {
        if (e.preventDefault) {
            e.preventDefault();
            $("#mostrarmodal").modal("show");
        }
        else {
            e.returnValue = false;
            $("#mostrarmodal").modal("show");
        }
    }
});

并且以前工作但是现在我必须添加另一个复选框列并使用jQuery将特定控制器发送到表单中的信息，这是视图的代码

<tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.numero_documento)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_empresa)
                                            </td>
                                            <td>
                                                <input type="checkbox" name="delete" value="@item.numero_documento" +"a" />
                                            </td>
                                            <td>
                                                <input type="checkbox" name="code" value="@item.numero_documento" +"a" />
                                            </td>
                                        </tr>
                                    }
                                </tbody>

这是我的jQuery的代码，问题是现在它没有验证是否至少检查了一个复选框没有复选框列，你能帮助我并告诉我这个问题吗？

 $("#btn-agrupar").click(function () {
            if ($("input[type='checkbox']").is(':checked') === true) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("RealizarAgrupacion","Home")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

        $("#btn-eliminar").click(function () {
            if ($("input[type='checkbox']").is(':checked') === true) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("Index","Contact")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

这是我表单中按钮的代码

<input type="button" value="Cancelar" id="btn-cancelar" class="btn btn-danger" />
                        <input type="button" value="Eliminar Solicitudes" id="btn-eliminar" class="btn btn-danger" />
                        <input type="button" value="Agrupar Solicitudes" id="btn-agrupar" class="btn btn-primary pull-right" />

答案

如果我正确地理解了您的问题，那么您在区分这两个复选框时似乎存在问题。您可以尝试使用它的名称来引用该复选框并查看它有帮助。

例如：

if ($("input[name='delete']").is(':checked') === true) {
    //Do something
}
if ($("input[name='code']").is(':checked') === true) {
    //Do something
}

要检查视图中的所有复选框，请使用prop功能

$('input:checkbox').prop('checked', true);

另一答案

看起来你错过了e事件参数

$("#btn-agrupar").click(function () ...

应该：

$("#btn-agrupar").click(function (e) ...

另一答案

似乎两个复选框列都没有任何区别。您可以指定一些html属性，如aria-describedby属性。例如，对于第一个Checkbox aria-describedby =“Delete”，对于第二个aria-describedby =“code”，如下所示

<tbody>
    @foreach (var item in Model)
    {
      <tr>
        <td>
            @Html.DisplayFor(modelItem => item.numero_documento)
       </td>
       <td>
          @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
       </td>
       <td>
          @Html.DisplayFor(modelItem => item.nombre_empresa)
       </td>
       <td>
          <input type="checkbox" name="delete" aria-describedby="Delete" value="@item.numero_documento" +"a" />
       </td>
       <td>
          <input type="checkbox" name="code" aria-describedby="Code" value="@item.numero_documento" +"a" />
       </td>
     </tr>
    }
</tbody>

并且最好检查被检查的复选框的长度，因为您说可以检查至少一个复选框意味着所有都不是必须检查。在这种情况下，尝试更改代码如下。

$("#btn-agrupar").click(function (e) {
            if ($("input[aria-describedby='Delete']").is(':checked').length) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("RealizarAgrupacion","Home")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

如果以上代码工作，则更改按钮单击代码中的代码。