按钮 - 单击其中一个按钮后如何停止工作答案

【问题标题】：Buttons - How to stop working after clicking on one of them按钮 - 单击其中一个按钮后如何停止工作
【发布时间】：2017-05-20 03:06:52
【问题描述】：

在我的代码中，我有twobuttons，我想确认如果用户点击其中任何一个，它将执行function（它已经工作），但如果它再次点击， 它不会做任何事情。

我的 HTML 代码：

<html>
<head>
<meta charset="UTF-8">

<title>Demo</title>
<script src="jquery-3.1.1.js"></script>
<script src="JS.js"></script>
<!--script src="JS2.js"></script-->
</head>

<body>
  <p><input type="button" name="click" value="Button I" id="1" onclick="myFunction();"/></p>
<p><input type="button" name="click" value="Button II" id="2" onclick="myFunction2();"/></p>

</body>
</html>

我的函数代码（.js）：

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $.ajax({
    type: 'POST',
    dataType: "json",
    contentType: "application/json",
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    data: JSON.stringify({
            "xxxxxxxxxxx":xxxxxxx,
            "xxxxxxxxxxxx":xxxxxxxxx,
            "xxxxxxxxxxxx":"xxxxxxx"
    }),
        success:function(output) {
            console.log(output);

            otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
       },
        error:function(output) {

       }
    });
}

提前感谢。

【问题讨论】：

点击后为什么不禁用呢？
您使用什么变量来存储按钮点击次数？您在哪里测试这是第一次点击其中一个按钮？
disable它在函数的末尾
这种情况下，只有点击后禁用。我将在数据库中创建一个表来检查@Cubi，但我会在之后尝试。这只是一个测试
Disabling the button after once click的可能重复

标签： javascript jquery html

【解决方案1】：

对于 jquery 1.6 及以上使用：

$("input[type='button']").prop("disable", true)

对于低于 1.6 的版本使用

$("input[type='button']").attr('disabled','disabled');

我个人会将它放在你的函数的顶部，在你的 ajax 调用之前。

这样，如果出现错误，您可以在错误处理程序中反转属性。

编辑

经过一些测试，我明白了你所说的它不起作用的意思。所以这里有一些替代品，包括原来的：

$("input")[0].disabled = true;
$("input")[1].disabled = true;

假设你只有两个输入按钮，没有文本框。

另一种方式：

$("input").prop("disabled", true);

再次假设您的文档中没有其他输入。

最后是原始答案，稍作改动：

$("input[type='button']").prop("disabled", true);

注意到“禁用”已更改为“已禁用”。

我已经使用 Microsoft Edge 尝试了所有这些，并且每一个都有效。我建议您从第一个开始，然后逐步进行，直到找到适合您的解决方案。

您的代码将如下所示

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $("input[type='button']").prop("disabled", true); <-- or one of the other choices here

    $.ajax({
    type: 'POST',
    dataType: "json",
    contentType: "application/json",
    url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    data: JSON.stringify({
            "xxxxxxxxxxx":xxxxxxx,
            "xxxxxxxxxxxx":xxxxxxxxx,
            "xxxxxxxxxxxx":"xxxxxxx"
    }),
        success:function(output) {
            console.log(output);

            otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
       },
        error:function(output) {

       }
    });
}

祝你好运

【讨论】：

如果你将它添加到成功功能上，它只会禁用成功按钮;-)。
如果用户在 ajax 返回之前单击按钮，将其放入成功函数并不会阻止它再次触发
@Alexis 同意。但是，在某些情况下，用户可能能够在 ajax 返回之前单击两次。在顶部禁用它们应该消除这种可能性。否则我当然同意你的看法
你是对的。因此在通话时禁用并在错误时启用。
我试了一下，但如果我再次点击，功能再次激活，我不想要这个，如果用户点击按钮，功能执行，如果用户再次点击，按钮将无法再次工作，你可以把这个和我的代码放在一起吗？也许我做错了什么

【解决方案2】：

由于您使用的是 JQuery，请考虑使用 .one() 函数。 http://api.jquery.com/one/

你会这样使用它。从每个输入元素中删除 onclick="myFunction()" 。然后在你的 .js 文件中使用 JQuery：

/**** add this here ****/
$(function(){
    /* EDIT: I noticed you're wanting to call a different fcn
       depending on which button is clicked. With my solution you 
       could handle this like so: */
    $('input').one('click', function(){
        if($(this).attr('id') !== '2') myFunction();
        else myFunction2();
    });
});

function myFunction(xx, xx, numberOrigin){
    numberOrigin +=1;

    $.ajax({
      type: 'POST',
      dataType: "json",
      contentType: "application/json",
      url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      data: JSON.stringify({
        "xxxxxxxxxxx":xxxxxxx,
        "xxxxxxxxxxxx":xxxxxxxxx,
        "xxxxxxxxxxxx":"xxxxxxx"
    }),
    success:function(output) {
        console.log(output);
        otherFunction(xxxxxxxxxxxxxxxx, numberOrigin);
    },
    error:function(output) {
       /**** also add here NOTE: in myFunction2() 
             you'll want to call myFunction2 here ****/
      $('input').one('click', myFunction);
    }
    });
}

one() 函数将在每个匹配选择器的元素上触发一次后解除绑定。

编辑：如果您的 AJAX 请求碰巧返回错误，您可能希望将点击处理程序重新附加到按钮。在这种情况下，将上面的代码添加到您的错误回调中，以便用户可以再次单击，如果这是您想要的行为。

【讨论】：

不是一个好的解决方案。如果 ajax 的结果是错误 btn is locked...
不确定ajax错误处理应该是按钮的作用。 OP 只希望 myfunction 触发一次，这样做。
OP 希望当按钮执行他的操作时，他被禁用。我们没有上下文。如果按钮没有执行其功能，它仍然会被您的解决方案阻止。
每个解决方案都会阻止它。如果出现错误，他将需要撤消禁用按钮的任何过程
感谢@Cruiser 的帮助。 +1