第一次单击时按钮立即被禁用

Question

我有一个带有“继续”按钮的弹出窗口，我需要的是，当第一次单击时按钮立即被禁用，我有我的代码，

 <button class="SmallBtn" type="button" onclick="ProceedImportData()" id="ProceedBtn">Proceed</button>

jquery喜欢，

 function ProceedImportData() {
var hasClicked = false;
$('#ProceedBtn').on('click', function (e) {
    if (hasClicked === true) {
        $("#ProceedBtn").attr('disabled', 'disabled');
    }
});
var PreUploadPreview =
    {
    };
$.ajax({
    url: '/Index/UploadedPreviewPage',
    data: JSON.stringify(PreUploadPreview),
    //        contentType: 'application/json; charset=utf-8',
    contentType: false,
    processData: false,
    type: "POST",
    success: function (data) {
        if (data) {
            MTIErrorChw();
        }
    },
});

}

但是代码不起作用。请告诉如何实现这一点。

Answer 1

可能您需要在文档准备就绪时调用函数：

$(function(){
     ProceedImportData();
      ...
 });

Answer 2

您可以通过这种方式将属性设置为禁用，并且在进行 ajax 调用之后。

<script>
    $(document).ready(function () {
    $('#ProceedBtn').on('click', function (e) {
    $(this).attr('disabled',true);
    $.ajax({
        url: '/Index/UploadedPreviewPage',
        data: JSON.stringify(PreUploadPreview),
        //        contentType: 'application/json; charset=utf-8',
        contentType: false,
        processData: false,
        type: "POST",
        success: function (data) {
            if (data) {
                MTIErrorChw();
            }
        },
    });

    });

    }
    );
    </script>
     <button class="SmallBtn" type="button" id="ProceedBtn">Proceed</button>

Answer 3

这对我很有用，

function ProceedImportData() {
$('#ProceedBtn').attr('disabled', true);
var PreUploadPreview ={};
$.ajax({
    url: '/Index/UploadedPreviewPage',
    data: JSON.stringify(PreUploadPreview),
    //        contentType: 'application/json; charset=utf-8',
    contentType: false,
    processData: false,
    type: "POST",
    success: function (data) {
        if (data) {MTIErrorChw();}
    },
});}

Answer 4

试试这样... Fiddle demo

onclick="ProceedImportData(this)"

在您的按钮标签中

function ProceedImportData(ele) {
var hasClicked = false;
$(ele).prop('disabled', true);
var PreUploadPreview =
    {
    };
$.ajax({
    url: '/Index/UploadedPreviewPage',
    data: JSON.stringify(PreUploadPreview),
    //        contentType: 'application/json; charset=utf-8',
    contentType: false,
    processData: false,
    type: "POST",
    success: function (data) {
        if (data) {
            MTIErrorChw();
        }
    },
});

}

第一次单击时按钮立即被禁用

Button immediately be disabled when first time click itself

model-view-controller

jquery

razor