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>