Javascript 单击按钮后禁用2个按钮

我在页面

index.php

上有一个提交按钮，当我点击这个按钮时，另一个脚本

（call.php）

通过ajax调用，它保存了一些响应。现在，我希望在单击submit按钮和通过调用ajax脚本在div下显示/接收响应之间的这段时间内，按钮option1和option2应该被禁用。当成功显示结果时，这两个按钮应该被启用，但是我不能这样做。有人能帮我吗

index.php页面上的3个按钮和脚本代码为

<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button>
<a href="#popup"><button class="botleftbtn" type="button" id="walkaway" style="display:none">Option1</button></a>
<a href="#"><button class="botrightbtn" type="button">Option2</button></a>


<script>
function myFunction() {
    alert("You need to login before negotiating! However you can purchase the product without negotiating");
}
var startClock;
var submitamt;
var walkaway;
var digits;

$(function() {
  startClock = $('#startClock').on('click', onStart);
  submitamt = $('#submitamt').on('click', onSubmit);
  walkaway = $('#walkaway').on('click', onWalkAway);
  digits = $('#count span');
  beforeStart();
});

var onStart = function(e) {
  startClock.fadeOut(function() {
    startTimer();
    submitamt.fadeIn(function() {
      submitamt.trigger('click'); // fire click event on submit
    });
    walkaway.fadeIn();
  });
};

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();
  $.ajax({
    type: 'post',
    url: 'call.php',
    dataType: 'json',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
    $('#proddisplay').html(returndata);
    },
    error: function() { 
      console.error('Failed to process ajax !');
    }
  });
};

var onWalkAway = function(e) {
  //console.log('onWalkAway ...');
};

var counter;
var timer;
var startTimer = function() {
  counter = 120;
  timer = null;
  timer = setInterval(ticker, 1000);
};

var beforeStart = function() {
  digits.eq(0).text('2');
  digits.eq(2).text('0');
  digits.eq(3).text('0');
};

var ticker = function() {
  counter--;
  var t = (counter / 60) | 0; // it is round off
  digits.eq(0).text(t);
  t = ((counter % 60) / 10) | 0;
  digits.eq(2).text(t);
  t = (counter % 60) % 10;
  digits.eq(3).text(t);
  if (!counter) {
    clearInterval(timer);
    alert('Time out !');
    resetView();
  }
};

var resetView = function() {
  walkaway.fadeOut();
  submitamt.fadeOut(function() {
    beforeStart();
    startClock.fadeIn();
  });
};
</script>

提交
函数myFunction（）{
警告（“您需要在协商前登录！但是您可以不经协商购买产品”）；
}
var startClock；
var submitamt；
var走开；
var数字；
$（函数（）{
startClock=$（'#startClock'）。在（'click'，onStart'）上；
submitmt=$（'submitmt'）。在（'click'，onSubmit'）；
walkaway=$（“#walkaway”）。on（'click'，on walkaway）；
数字=$（“#计数范围”）；
beforeStart（）；
});
var onStart=函数（e）{
startClock.fadeOut（函数（）{
startTimer（）；
submitamt.fadeIn（函数（）{
触发器（'click'）；//在提交时触发click事件
});
fadeIn（）；
});
};
var onSubmit=函数（e）{
var txtbox=$（'#txt'）.val（）；
var hiddenTxt=$（'#hidden'）.val（）；
$.ajax({
键入：“post”，
url:'call.php'，
数据类型：“json”，
数据：{
txt:txtbox，
隐藏：hiddenTxt
},
cache:false，
成功：函数（返回数据）{
$（'#proddisplay'）.html（返回数据）；
},
错误：函数（）{
console.error（'Failed to process ajax！'）；
}
});
};
var onWalkAway=函数（e）{
//log（'onWalkAway…'）；
};
var计数器；
无功定时器；
var startTimer=函数（）{
计数器=120；
定时器=空；
定时器=设定间隔（滴答器，1000）；
};
var beforeStart=函数（）{
数字。等式（0）。文本（'2'）；
数字。等式（2）。文本（'0'）；
数字。等式（3）。文本（'0'）；
};
var ticker=函数（）{
计数器--；
var t=（counter/60）| 0；//它是四舍五入的
数字。等式（0）。文本（t）；
t=（（计数器%60）/10）0；
数字。等式（2）。文本（t）；
t=（计数器%60）%10；
数字。等式（3）。文本（t）；
如果（！计数器）{
清除间隔（计时器）；
警报（“超时！”）；
重置视图（）；
}
};
var resetView=函数（）{
逐渐消失；
子项淡出（函数（）{
beforeStart（）；
startClock.fadeIn（）；
});
};

您可以通过在发出AJAX请求之前禁用按钮，然后在请求的

complete

处理程序中再次启用按钮来实现这一点。试试这个：

var onSubmit = function(e) {
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();
    $('.botleftbtn, .botrightbtn').prop('disabled', true); // < disable the buttons

    $.ajax({
        type: 'post',
        url: 'call.php',
        dataType: 'json',
        data: {
            txt: txtbox,
            hidden: hiddenTxt
        },
        cache: false,
        success: function(returndata) {
            $('#proddisplay').html(returndata);
        },
        error: function() { 
            console.error('Failed to process ajax !');
        },
        complete: function() {
            $('.botleftbtn, .botrightbtn').prop('disabled', false); // < enable the buttons
        }
    });
};

var onSubmit=函数（e）{
var txtbox=$（'#txt'）.val（）；
var hiddenTxt=$（'#hidden'）.val（）；
$（'.botleftbtn、.botrightbn'）.prop（'disabled'，true）；//<禁用按钮
$.ajax({
键入：“post”，
url:'call.php'，
数据类型：“json”，
数据：{
txt:txtbox，
隐藏：hiddenTxt
},
cache:false，
成功：函数（返回数据）{
$（'#proddisplay'）.html（返回数据）；
},
错误：函数（）{
console.error（'Failed to process ajax！'）；
},
完成：函数（）{
$（'.botleftbtn、.botrightbn'）.prop（'disabled'，false）；//<启用按钮
}
});
};

---

请注意，最好启用

complete

处理程序中的按钮，而不是

success

处理程序中的按钮。这是因为如果出现错误，按钮将永远不会再次启用。

您可以通过在发出AJAX请求之前禁用按钮，然后在请求的

完成处理程序中再次启用按钮来实现这一点。试试这个：

var onSubmit = function(e) {
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();
    $('.botleftbtn, .botrightbtn').prop('disabled', true); // < disable the buttons

    $.ajax({
        type: 'post',
        url: 'call.php',
        dataType: 'json',
        data: {
            txt: txtbox,
            hidden: hiddenTxt
        },
        cache: false,
        success: function(returndata) {
            $('#proddisplay').html(returndata);
        },
        error: function() { 
            console.error('Failed to process ajax !');
        },
        complete: function() {
            $('.botleftbtn, .botrightbtn').prop('disabled', false); // < enable the buttons
        }
    });
};

var onSubmit=函数（e）{
var txtbox=$（'#txt'）.val（）；
var hiddenTxt=$（'#hidden'）.val（）；
$（'.botleftbtn、.botrightbn'）.prop（'disabled'，true）；//<禁用按钮
$.ajax({
键入：“post”，
url:'call.php'，
数据类型：“json”，
数据：{
txt:txtbox，
隐藏：hiddenTxt
},
cache:false，
成功：函数（返回数据）{
$（'#proddisplay'）.html（返回数据）；
},
错误：函数（）{
console.error（'Failed to process ajax！'）；
},
完成：函数（）{
$（'.botleftbtn、.botrightbn'）.prop（'disabled'，false）；//<启用按钮
}
});
};

请注意，最好启用
complete
处理程序中的按钮，而不是
success
处理程序中的按钮。这是因为如果出现错误，按钮将永远不会再次启用。
单击时禁用按钮，并在ajax成功时启用它们：

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();

  //Disable buttons ---------------------- //
  //Give an id to the second button
  $('#walkaway, #the_other_button').prop('disabled', true);

  $.ajax({
    type: 'post',
    url: 'call.php',
    dataType: 'json',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
      $('#proddisplay').html(returndata);
      //Enable buttons ---------------------- //
      $('#walkaway, #the_other_button').prop('disabled', false);
    },
    error: function() { 
      console.error('Failed to process ajax !');
    }
  });
};

单击时禁用按钮，并在ajax成功时启用它们：

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();

  //Disable buttons ---------------------- //
  //Give an id to the second button
  $('#walkaway, #the_other_button').prop('disabled', true);

  $.ajax({
    type: 'post',
    url: 'call.php',
    dataType: 'json',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
      $('#proddisplay').html(returndata);
      //Enable buttons ---------------------- //
      $('#walkaway, #the_other_button').prop('disabled', false);
    },
    error: function() { 
      console.error('Failed to process ajax !');
    }
  });
};

在onsubmit（）代码中，获取要停用的按钮的var引用

Var btn1 = document.getElementbyId("btn1");

但是您必须为这两个按钮设置一个Id

您可以在提交代码中禁用这些，然后在计时器完成后启用它们

Btn1.disabled = true;

计时器完成后，以同样的方式将其设置为false。
在onsubmit（）代码中，获取要停用的按钮的var引用

Var btn1 = document.getElementbyId("btn1");

但是您必须为这两个按钮设置一个Id

您可以在提交代码中禁用这些，然后在计时器完成后启用它们

Btn1.disabled = true;

计时器完成后，以同样的方式将其设置为false