Кнопка отключения яваскрипта

Мне интересно, может ли кто-нибудь помочь мне с этим.

У меня есть кнопка, определенная как:

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

Я могу использовать jQuery, стандартный javascript или Dojo, чтобы отключить кнопку с событием onClick:

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

Проблема, с которой я столкнулся, заключается в том, что хотя этот код отключает кнопку, событие onClick все равно запускает функцию callMe(), если я нажимаю кнопку.

Как сделать так, чтобы отключенная кнопка не вызывала функцию onClick?


javascript html jquery css dojo
person t0mcat    schedule 22.08.2011    source источник
comment
Проверьте, отключена ли кнопка в callMe?   -  person Gelatin    schedule 22.08.2011
comment
Кстати, вы также можете передавать true как attr('disabled', true), возможно, просто для большей ясности.   -  person pimvdb    schedule 22.08.2011
comment
@Simon, хорошая идея, но это повлечет за собой добавление этой проверки в функцию, хотя некоторым частям приложения эта функция не нужна.   -  person t0mcat    schedule 22.08.2011
comment
@pimvdb, можете попробовать ваше решение.   -  person t0mcat    schedule 22.08.2011

Ответы (7)


arrow_upward
4
arrow_downward

С помощью jQuery вы можете связать функцию, которая проверяет, отключена ли ваша кнопка:

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

arrow_upward
1
arrow_downward

Поскольку вы используете jQuery, используйте

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

вместо onClick.

person Blazemonger    schedule 22.08.2011
comment
Привет mblase, На самом деле я использую стандартный Javascript на данный момент. - person t0mcat; 22.08.2011

arrow_upward
0
arrow_downward

В том же коде, где вы отключили его, просто удалите обработчик события onclick.

person Jonathan M    schedule 22.08.2011
comment
Привет Джонатан, Как удалить обработчик событий onClick? - person t0mcat; 22.08.2011

arrow_upward
0
arrow_downward

вместо использования атрибута onclick привязать к событию

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

попробуйте без чека, не уверен, что это необходимо.

person Juan Ayala    schedule 22.08.2011

arrow_upward
0
arrow_downward

Это один из способов.

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

Чтобы отключить кнопки, просто добавьте к ним отключенный класс.

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

Добавьте соответствующие стили в класс disabled, чтобы кнопка выглядела как отключенная, или вы также можете установить свойство disabled вместе с настройкой класса.

person ShankarSangoli    schedule 22.08.2011

arrow_upward
0
arrow_downward

вы должны использовать 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();"

* Я регулярно rant о как HTML, CSS и JS соответствуют определению MVC

person zzzzBov    schedule 22.08.2011
comment
Привет, zzzzzBov, я не настаиваю на использовании встроенного кода. Я бы предпочел лучшее решение, если вы скажете, что встроенный не годится, я не буду его использовать :) - person t0mcat; 22.08.2011
comment
@ t0mcat, я обновил свой ответ ссылками на причины, по которым вам следует избегать встроенного JS. - person zzzzBov; 22.08.2011

arrow_upward
0
arrow_downward

Вместо ...

$('#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
person John Slegers    schedule 30.03.2016