Как отключить кнопку ссылки в jQuery Mobile? - PullRequest
Новая
       1

Как отключить кнопку ссылки в jQuery Mobile?

14 голосов
/ 22 июня 2011

У меня есть веб-сайт jQuery Mobile Beta 1 с кнопкой ссылки jQuery 1.6.1, например: 

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

И в document.ready я установил событие нажатия: 

$('#subselection').livequery("click", function(){
  alert('test');
});

Я хочу отключить эту «кнопку ссылки», и я попытался 

$('#subselection').button('disable')

И эта команда установила стиль кнопки, как будто она отключена, но событие нажатия работает.

Я также попытался 

$('#subselection').prop('disabled', true);

и $ ('# subselection'). Prop ('disabled');дает истину, но не отключается.

У кого-то есть хорошая идея.

Ответы [ 6 ]

26 голосов
/ 31 октября 2011

Пример кнопки ссылки:

JS 

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML 

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

ПРИМЕЧАНИЕ:- http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Ссылки, стилизованные под кнопки, имеют все те же визуальные параметры, что и настоящие кнопки на основе форм ниже, но есть несколько важных отличий.Кнопки, основанные на ссылках, не являются частью плагина кнопки, а только используют базовый плагин buttonMarkup для генерации стилей кнопок, поэтому методы кнопки формы (включить, отключить, обновить) не поддерживаются.Если вам нужно отключить основанную на ссылках кнопку (или любой другой элемент), можно применить самостоятельно отключенный класс ui-disabled с помощью JavaScript для достижения того же эффекта.

13 голосов
/ 22 июня 2011

Элемент a не имеет свойства disabled.Поэтому определение одного не повлияет на обработчики событий, которые вы, возможно, подключили к нему.

пример: http://jsfiddle.net/niklasvh/n2eYS/

Список доступных атрибутов можно найти в HTML.5 ссылка .

Чтобы решить вашу проблему, вместо этого вы можете, например, назначить disabled как data в элементе:

$('#subselection').data('disabled',true);

а затем в вашем событии проверьте, установлен ли он:

if (!$(this).data('disabled'))

пример: http://jsfiddle.net/niklasvh/n2eYS/5/

9 голосов
/ 18 сентября 2012

В этом случае нет необходимости в jquery / javascript. Просто добавьте класс 'ui-disabled'.

Как например: 

<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

Это то, что я делаю, и это работает для меня;)

2 голосов
/ 13 сентября 2011

попробуйте использовать 

$('#subselection').button().button('disable'); //disable in JQM

$('#subselection').button().button('enable'); //enable in JQM

это, кажется, работает визуально, чтобы отобразить стиль отключения / включения ... ОДНАКО кнопка "все еще активна" (так что следите!: P)

1 голос
/ 24 июля 2012

Я знаю, что уже есть принятый ответ на этот вопрос, но я думаю, что этот ответ намного легче понять. Просто сделайте так, чтобы функция click вернула false. 

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

<script>
$('#subselection').click(function() {
    alert("do some code here");
    return false;
});
</script>
0 голосов
/ 21 июля 2011

В качестве альтернативы вы можете просто использовать кнопку тег / виджет напрямую <button>TEST</button>, который имеет надлежащее отключение. Если вы просто используете его для захвата события и запуска какого-либо JavaScript, не знаете, какое преимущество будет иметь использование ссылки.

...