未触发提交后禁用提交按钮的 Jquery 功能答案

【问题标题】：Jquery function to disable submit button after submit is not triggering未触发提交后禁用提交按钮的 Jquery 功能
【发布时间】：2020-03-05 21:35:27
【问题描述】：

我从这里拿走了它： How do I prevent multiple form submission in .NET MVC without using Javascript?

这是未触发的函数：

<script>
    $(document).ready(function () {
        $('#frmEnvio').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    });
</script>

这是表格，是确认表格。如您所见，我有一个包含详细信息的表单水平和另一个名为 frmEnvio 的表单，其中包含提交按钮。

@model PedidosInstitucionales.ViewModels.PedidoViewModel
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3><b>Enviar Pedido</b></h3>

<div class="input-group">
    <div class="col-md-offset-2 col-md-4" style="text-align: left; width: 100%;">
        <a href='@Url.Action("Index", "Pedidos")'><i class="fas fa-backward"></i> Volver al Listado</a>
    </div>
    <div class="col-md-offset-2 col-md-4" style="text-align: center; width: 100%;">
        <h3>¿Confirma el Envío de este Pedido? Asegúrese de que los datos sean correctos.</h3>
    </div>
</div>

<br>
<div class="input-group">
    <div class="col-md-12" style="text-align: center; width: 100%;">
        <h4><b>Observaciones</b></h4>
        @Html.DisplayFor(Model => Model.Observaciones)
    </div>
</div>
<div>
    <table id="Header" class="table table-striped table-bordered table-hover" style="width:100%">
        <thead>
            <tr>
                <th>Pedido Nro.</th>
                <th>Cliente</th>
                <th>Fecha de Alta</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(Model => Model.NumPedido)
                </td>

                <td>
                    @Html.DisplayFor(Model => Model.cliente.Descripcion)
                </td>

                <td>
                    @Html.DisplayFor(Model => Model.sFechaAlta)
                </td>
            </tr>
        </tbody>
    </table>
</div>
<h3>Detalle de Productos</h3>
<div class="form-horizontal bg-light" name="frmEnvio" id="frmEnvio">
    <table id="tblPedidosDet" class="display compact table-striped table-bordered table-hover" style="font-size: 12px; color:black; width:100%">
        <thead>
            <tr>
                <th>Producto</th>
                <th>Ean</th>
                <th>Cod. Elea Phoenix</th>
                <th>Droga</th>
                <th>Cantidad por Unidad</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model.LstPedidoDetViewModel)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Descripcion)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Ean)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.CodProducto)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Droga)
                    </td>

                    <td>@Html.DisplayFor(modelItem => item.Cantidad)</td>
                </tr>
            }
        </tbody>
    </table>
</div>
<br>
<div class="col-md-12">
    <div class="alert alert-danger d-none" role="alert" id="ddlalert">

    </div>
</div>
<br>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-actions no-color">
        <input type="submit" id="btnEnviarPedido" name="btnEnviarPedido" class="btn btn-default"  value="Enviar Pedido" />
    </div>
}

这是控制器，触发正常。

[AuthorizeCliente]
[HttpPost, ActionName("Envio")]
[ValidateAntiForgeryToken]
public ActionResult EnvioConfirmed(int id)
{
    bool bPedidoEnviado = false;
        using (var dbContextTransaction = db.Database.BeginTransaction())
        {
            Pedido pedido = db.Pedido.Find(id);
            try
            {

                if (pedido.PedidoDet.Count == 0)
                    throw new Exception("El Pedido no contiene productos o válidos o se encuentra vacío.");

                pedido.FechaEnvio = DateTime.Now;
                GenerarXML(pedido);
                pedido.Enviado = (short) 1;

                db.SaveChanges();

                dbContextTransaction.Commit();
                bPedidoEnviado = true;

                CrearArchivoExcel(pedido);

                if (pedido.Cliente.PedidosControlados == 1)
                {
                    EnviarMailControlador(pedido);
                }

                EnviarMailAdministradores(pedido);

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                if (!bPedidoEnviado) dbContextTransaction.Rollback();
                PedidoViewModel oPedidoViewModel = CargarDetallePedido(pedido);
                oPedidoViewModel.msgError = ex.Message;
                return View(oPedidoViewModel);
            }
        }
    }

【问题讨论】：

但是你调用 submit 的元素不是表单元素，而是 div 元素：所以我什至不确定表单是如何提交的。此外，即使表单提交有效——页面可能会在提交时重新加载，因此您不会保留提交按钮的禁用状态。
即使我使用“frmEnvio”作为主窗体的名称，它也不起作用。但是我不确定在哪里放置提交按钮，在那个 DIV 里面可以还是应该在表单本身里面？我编辑了我的帖子并将名称 frmEnvio 改回了主窗体，我在测试不同的东西时更改了它。

标签： jquery model-view-controller

【解决方案1】：

看起来问题是我使用了表单名称，仅使用 form（并且没有 #）它工作正常。

        $('form').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });

【讨论】：

【解决方案2】：

<script>
    $(document).ready(function () {
        $('#frmEnvio').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    });
</script>

改变这一行

  $(this).find(':submit').attr('disabled', 'disabled');

到

  $(this).find(':submit').attr('disabled', true);

你需要传递一个布尔值作为 attr 函数的第二个参数，你传递的是一个带有属性名称的字符串。

您的表单也没有 Id，并且您正在使用 Html 标签助手呈现它

【讨论】：