Jquery - 单击后按钮未禁用

Question

我试图在单击按钮后禁用它，但它不起作用我在网上查看了多种解决方案，但目前没有任何解决方案适合我，所以我想知道我做错了什么。

这是我的文件，我在其中尝试了@SLePort 答案中推荐的解决方案

 @model PIC_Program_1._0.Models.JobOrder

@{
    ViewBag.Title = "Change Status";
}

<script type="text/javascript">

    $('form').submit(function (e) {
        e.preventDefault();
        $('input[type="submit"]').prop("disabled", true);
    })
 </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

@using PIC_Program_1._0.Models
<h2>Change Status</h2>

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

    @Html.Raw(IGT.Format(WebUtility.HtmlDecode(Convert.ToString(Html.ValidationSummary(true, "", new { @class = "text-danger" })))))

    <input type="hidden" name="origin" value="@ViewBag.Origin" />

    <div class="form-horizontal">
        <h4>Work Order</h4>
        <br />
        <p><b><u>Order Details:</u></b></p>

        @{
            if (Model.Status == JOStatus.Pending && Model.hasBeenStarted == false && Model.parentJobOrderID <= 0)
            {
                <div class="form-group">
                    @Html.LabelFor(model => model.dynamicOrder, htmlAttributes: new { @class = "control-label col-md-2" })

                    <div class="col-md-10">
                        @Html.EditorFor(model => model.dynamicOrder, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.dynamicOrder, "", new { @class = "text-danger" })
                    </div>
                </div>



            }
            else
            {
                @Html.HiddenFor(model => model.dynamicOrder)
            }
        }


        <div class="form-group">
            @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.Status, new SelectList(ViewBag.statusList, "value", "text"), new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Details, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Details, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Details, "", new { @class = "text-danger" })
            </div>
        </div>

        <form>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn" />
                </div>
            </div>
        </form>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

这是我尝试过的一些 jquery 方法

<script type="text/javascript">

    $('form').submit(function () {
        $(':submit').prop("disabled", "disabled");
    })

   $('input[type=submit]').one('submit', function () {
        $(this).attr('disabled', 'disabled');
    });

    $('#form-group').one('submit', function () {
        $(this).find('input[type="submit"]').attr('disabled', 'disabled');
    });

 </script>

任何帮助将不胜感激。

Answer 1

尝试添加preventDefault() 以防止按钮在页面重新加载后消失，并将disabled 属性设置为true 值：

$('form').submit(function(e) {
  e.preventDefault();
  $('input[type="submit"]').prop("disabled", true);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Save" class="btn" />
    </div>
  </div>
</form>