jquery - 仅单击一次按钮（js）

Question

我查看了 stackoverflow 和其他网站，但找不到我正在寻找的答案。

我有一个按钮，我希望用户只能点击一次。这是我的 javascript/jquery 触发点击事件。但是我怎样才能强制它只被点击一次呢？

 $(document).ready(function () {
     //var $new_total = $('#gtotal').val();

     $('#a_is_valid').click(function () {
         if ($('#code_promo').val() == 'theCode') {
             $('#gtotal').val($('#gtotal').val() - ($('#gtotal').val() - (($('#gtotal').val() * .75))));
         }
     })
 })

Answer 1

使用 jQuery 的.one()功能。

$('#a_is_valid').one('click', function(){
    if ($('#code_promo').val() == 'theCode')
    {$('#gtotal').val($('#gtotal').val()-($('#gtotal').val()-(($('#gtotal').val()*.75))));
}

Answer 2

你可以使用 jquery.one() 这将确保点击事件只发生一次。

Demo

$('#a_is_valid').one('click', function(){

        if ($('#code_promo').val() == 'theCode')
        {
          var gtot = $('#gtotal').val();
          $('#gtotal').val(gtot -(gtot -(gtot *.75)));
        }
 });

另一种方法是使用on()和off()

$('#a_is_valid').on('click', handleClick);

function handleClick() {
    var gtot = $('#gtotal').val();
    $(this).off('click');
    if ($('#code_promo').val() == 'theCode') {
        $('#gtotal').val( gtot - (gtot-(gtot * 0.75)) );
    }
} 

Answer 3

为什么不使用.one()代替.click()？

Answer 4

使用现代 JS！

const button = document.getElementById("a_is_valid");
button.addEventListener("click", function() {
    // Add one-time callback
}, {once : true});

您也可以禁用该按钮：

button.disabled = true;

文档,可以使用