Question

我的弹出窗口带有Proceed按钮，我需要的是，第一次单击时我的代码就会立即被禁用，我的代码就像，

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

jquery like，

 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

您可以通过这种方式设置禁用属性，然后在进行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 2

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

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

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();
        }
    },
});

}

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

4 个答案: