Javascript 禁用按钮答案

【问题标题】：Javascript disable buttonJavascript 禁用按钮
【发布时间】：2016-03-30 09:43:52
【问题描述】：

我想知道是否有人可以帮助我解决这个问题。

我有一个按钮定义为：

<input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/>

我可以使用 jQuery、标准 javascript 或 Dojo 来禁用带有 onClick 事件的按钮：

$('#myButton').attr('disabled', 'disabled');

我面临的问题是，即使这段代码禁用了按钮，如果我点击按钮，onClick 事件仍然会触发函数callMe()。

如何让禁用的按钮不调用onClick函数？

【问题讨论】：

查看callMe中按钮是否被禁用？
顺便说一句，你也可以像attr('disabled', true)一样传递true，只是为了让它更清楚一点。
@Simon，好主意，但这需要在函数中添加此检查，即使应用程序的某些部分不需要此功能
@pimvdb，可以试试你的解决方案。

标签： javascript jquery html css dojo

【解决方案1】：

使用 jQuery，你可以绑定一个函数来检查你的按钮是否被禁用：

$('#myButton').click(function() {
  if (!$(this).is(':disabled')) {
    callMe();
  }
});

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，请使用

$('#myButton').click(function() { callMe(); this.unbind(); });

而不是 onClick。

【讨论】：

嗨 mblase，其实我现在正在使用这个标准的 Javascript。

【解决方案3】：

$('#myButton').click(function(){
    if( !$(this).is('[disabled=disabled]') ){
       ...
    }
});

【讨论】：

【解决方案4】：

在您禁用它的同一代码中，只需删除 onclick 事件处理程序。

【讨论】：

嗨乔纳森，如何删除 onClick 事件处理程序？

【解决方案5】：

不使用 onclick 属性，而是绑定到事件

$('#myButton').click(function(e){
    // try it without this
    if($(this).attr('disabled'))
        return false;
    callMe();
    e.preventDefault();
});

不检查就试试，不确定是否有必要。

【讨论】：

【解决方案6】：

这是一种做法。

$('#myButton').click(function(){
  if(!$(this).hasClass("disabled")){
     //Do stuff here
  }
});

要禁用按钮，只需将禁用的类添加到它。

$('#myButton').addClass("disabled");

在 disabled 类中添加适当的样式以使按钮看起来像已禁用，或者您也可以在设置类的同时设置 disabled 属性。

【讨论】：

【解决方案7】：

_{您应该使用 jQuery 来附加点击处理程序，而不是内联添加它们*}

只需在您的点击功能中添加一个检查

$('#myButton').click(function(){
  var $this;
  $this = $(this);
  if ( $this.is(':disabled') ) return;
  callMe();
});

或者，

$('#myButton').click(callMe);

callMe()
{
  var $this;
  $this = $(this);
  if ($this.is(':disabled')) return;
  ...the rest of your code...
}

或者如果你坚持使用内联：

onclick="if ($(this).is(':disabled')) return; callMe();"

* 我regularly rant about how HTML, CSS & JS符合MVC的定义

【讨论】：

您好 zzzzzBov，我不坚持使用内联。我更喜欢更好的解决方案，如果你说内联不好，我不会使用它:)
@t0mcat，我已经更新了我的答案，其中包含了您应该避免使用内联 JS 的原因的链接。

【解决方案8】：

而不是...

$('#myButton').attr('disabled', 'disabled');

...使用...

$('#myButton')
   .prop('disabled', 'disabled')  // Sets 'disabled' property
   .prop('onclick', null)         // Removes 'onclick' property if found
   .off('click');                 // Removes other events if found

【讨论】：