提交后永久禁用按钮答案

【问题标题】：permanently disable the button after submit提交后永久禁用按钮
【发布时间】：2017-05-02 07:15:30
【问题描述】：

有什么方法可以在单击按钮后永久禁用/删除它。这是代码

<a href="send.php?id=<?php echo $row['issue_book_id'];?>">
  <button onclick="this.disabled='disabled';" style="margin-top:5px !important;" type="button" class="btn btn-warning btn-lg">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
  </button>
</a>

【问题讨论】：

是的，使用 jquery，这个问题已经可以在 stackoverflow 上找到，也许在其他十万个网站上。应该关闭
您可以设置一个 cookie 并在每次页面加载时检查它是否存在。如果 cookie 存在，则不显示或禁用按钮
Disable/enable an input with jQuery?的可能重复
您的 HTML 无效。 a 内不能有 button。
大声笑，你在链接标签内包装了一个按钮。有趣

标签： javascript php jquery html

【解决方案1】：

调用button的函数onclick。禁用该功能的按钮。

希望这个 sn-p 有用

HTML

<button onclick="updateState(this)" style="margin-top:5px;" type="button" class="btn btn-warning btn-lg">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
  </button>

function updateState(context){
     context.setAttribute('disabled',true)
    }

锚标记内的按钮旁边是无效的 html 5。内联样式也不需要 !important，因为它具有最高的特异性

DEMO

【讨论】：

所以您只是省略了 <a href... 包装部分，以便在主题上给出正确答案。 +1 ;)

【解决方案2】：

你可能想要这样的东西：

<a href="#" class="btn btn-warning btn-lg" onclick="this.className += ' disabled';" style="margin-top:5px !important;">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
</a>

请注意，我已将按钮标记更改为锚标记。这在您正在使用的 Bootstrap 中是可以的。

【讨论】：

【解决方案3】：

既然你在这个问题上标记了 jQuery....

你弄乱了 4 种语言...

一个是 PHP，我们不知道你打算用它做什么。
我想您想将id 发送到服务器端...
将如何处理？预期的答案是什么？
（超出范围）

但是其他 3 个应该这样管理：

CSS：

#mybutton{
  margin-top:5px !important;
}

HTML：

<button id="mybutton" class="btn btn-warning btn-lg" data-book-id="<?php echo $row['issue_book_id'];?>">
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
</button>

jQuery：

$("#mybutton").on("click",function(){
  $(this).attr('disabled',true);

  $.ajax({
    url: "send.php",
    type: "POST",
    data: "id="+$(this).data("book-id"),    // the id sent in POST.
    cache: false,
    success: function(html) {
      // Success message
      console.log("Ajax worked! Now What do I do with it!?!");
      console.log("Ho!... Here is the html: \n\n" + html);
    },
    error: function(jqXHR,textStatus,errorThrown) {
      console.log("Error: "+errorThrown);
    }
  });
});

【讨论】：