在 MVC C# 和 jQuery 中提交表单之前检查复选框是否被选中 [重复]

Question

起初我有这个 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" />

Answer 1

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

例如：

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

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

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

Answer 2

您似乎在

中缺少 e 事件参数

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

应该是：

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

Answer 3

似乎两个复选框列没有任何区别。您可以指定一些 html 属性，例如 aria- describeby 属性。例如 对于第一个复选框 aria- describeby="Delete" 和第二个 aria- describeby="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");
                }
            }
        });

如果上述代码有效，请更改按钮单击代码中的代码。