Fatal编程技术网
  • javascript/
  • 如何使用Javascript禁用单击按钮上的HTML按钮？

如何使用Javascript禁用单击按钮上的HTML按钮？

javascript jquery html

如何使用Javascript禁用单击按钮上的HTML按钮？,javascript,jquery,html,Javascript,Jquery,Html,单击“我的按钮”后，应将其禁用，并且在刷新页面之前，不得再次单击该按钮。下面是我的代码： <html> <head> <script type="text/javascript"> function myButtonClicked() { alert("Has myButton got disabled? I need solution for this."); } </script> </head> <body>

单击“我的按钮”后，应将其禁用，并且在刷新页面之前，不得再次单击该按钮。下面是我的代码：

<html>
<head>
<script type="text/javascript">
function myButtonClicked()
{
    alert("Has myButton got disabled? I need solution for this.");
}
</script>
</head>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked()">Click ME</button>
</body>
</html>


函数myButtonClicked（）
{
警报（“myButton是否已禁用？我需要此解决方案”）；
}
点击我
点击我
点击我
在调用myButtonClicked函数之前，它应该被禁用。实际上，我想在这个函数中编写一个PHP脚本，它将从数据库中获取一些数据，这将在实际环境中花费一些时间。这就是我想禁用按钮的原因。如何实现这一点？

您可以将此
传递给您的函数：


<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>





$("button").click(function() {
  $('#'+this.id).prop('disabled', true);
});


使用jQuery，您可以将与一起使用：


$('button').click(function() {
    $(this).prop('disabled',true);
});



添加-


function myButtonClicked()
{
    alert("Has myButton got disabled? I need solution for this.");
    this.disabled = true;
}



$("button").click(function() {
  $('#'+this.id).prop('disabled', true);
});



它有帮助吗？
在调用函数时将元素作为参数


   <button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
   <button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
   <button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>


小提琴：


$("button").click(function() {
  $('#'+this.id).prop('disabled', true);
});



您可以这样禁用，这是可以自我解释的：


<script>
function myButtonClicked(id)
{
    alert("Has myButton got disabled? I need solution for this.");

    $("#" + id).attr("disabled", true);
}
</script>

<body>
<button type="button" id="myButton1" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this.id)">Click ME</button>
</body>




功能myButtonClicked（id）
{
警报（“myButton是否已禁用？我需要此解决方案”）；
$（“#”+id）.attr（“disabled”，true）；
}
点击我
点击我
点击我

有比重写函数并传递“this”更简单的方法。只需在onclick属性中使用“this”：


<button type="button" id="myButton1" onclick="this.disabled=true;myButtonClicked()">Click ME</button>



点击我


这将禁用它，但它不一定在表单上明显可见。我喜欢使用：


<button type="button" id="myButton1" onclick="this.style.visibility='hidden';myButtonClicked()">Click ME</button>



点击我


它“消失”了，但它仍然在形式中占有一席之地

如果不需要占位符，还可以使用：


<button type="button" id="myButton1" onclick="this.hidden=true;myButtonClicked()">Click ME</button>



点击我

是否包含jQuery？如果是旧版本，则.prop可能无法工作。尝试使用.attr（“disabled”，true）；是的，必须提到jQuery，因为它解决了整个宇宙中的所有问题：P@Felix-如果我写警报（“你好”）；el.disabled之后=真；在您的小提琴中，虽然按钮被禁用，但警报不会被触发。@Felix-是的，它工作了，很抱歉，是我的错误：）。谢谢你为我的问题提供了简单的解决方案。接受你的回答。

<button type="button" id="myButton1" onclick="this.hidden=true;myButtonClicked()">Click ME</button>