Question

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

我有一个按钮定义为：

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

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

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

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

如何禁用按钮不调用onClick功能？

Answer 1

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

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

Answer 2

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

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

而不是onClick。

Answer 3

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

Answer 4

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

Answer 5

_{你应该使用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的定义

Answer 6

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

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

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

Answer 7

这是一种做法。

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

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

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

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

Answer 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

Javascript禁用按钮

8 个答案: