web-dev-qa-db-ger.com

Wie deaktiviere ich eine Link-Schaltfläche in jQuery Mobile?

Ich habe eine jQuery Mobile Beta 1-Website mit einem Link-Button wie diesem:

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

Und in document.ready habe ich das Click-Event gesetzt:

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

Ich möchte diesen "Link-Button" deaktivieren und habe es versucht

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

Und dieser Befehl setzt den Schaltflächenstil so, als wäre er deaktiviert, aber das Klickereignis funktioniert.

Ich habe es auch versucht

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

und $ ('# subselection'). prop ('disabled'); Gibt wahr, aber es ist nicht deaktiviert.

Jemand hat eine gute Idee.

javascriptjquerymobilejquery-mobile
14
RickardP

Das Element a hat keine Eigenschaft disabled. Wenn Sie also einen definieren, hat dies keine Auswirkungen auf Event-Handler, die Sie möglicherweise daran angehängt haben.

beispiel: http://jsfiddle.net/niklasvh/n2eYS/

Eine Liste der verfügbaren Attribute finden Sie in der HTML 5-Referenz .

Um Ihr Problem zu lösen, können Sie stattdessen beispielsweise die disabled als data im Element zuweisen:

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

und dann in Ihrer Veranstaltung überprüfen, ob es eingestellt ist:

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

beispiel: http://jsfiddle.net/niklasvh/n2eYS/5/

13
Niklas

Beispiel für die Schaltfläche "Link":

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>

HINWEIS: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Verknüpfungen, die wie Schaltflächen gestaltet sind, haben alle die gleichen visuellen Optionen wie die form-basierten Schaltflächen von true , Es gibt jedoch einige wichtige Unterschiede. Verknüpfungsbasierte Schaltflächen sind nicht Teil des Schaltflächen-Plugins und nur darin enthalten Verwenden Sie einfach das zugrunde liegende buttonMarkup-Plugin, um die Schaltflächenstile zu generieren, sodass die Formularschaltflächenmethoden (Aktivieren, Deaktivieren, Aktualisieren) nicht unterstützt werden. Wenn Sie einen Link deaktivieren müssen -Taste (oder ein beliebiges Element), es ist möglich, die deaktivierte Klasse ui-disabled selbst mit JavaScript anzuwenden, um denselben Effekt zu erzielen.

25
Phill Pafford

In diesem Fall ist kein Javascript erforderlich. Fügen Sie einfach eine "Ui-disabled" -Klasse hinzu.

Wie zum Beispiel:

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

Das ist was ich tue und es funktioniert für mich;)

9
Gillian Lo Wong

versuchen Sie es mit

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

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

dies scheint visuell zu funktionieren, um einen Deaktivierungs-/Aktivierungsstil darzustellen ... JEDOCH kann der "Button" immer noch angeklickt werden (also aufgepasst!): P

2
Erik Yuzwa

Ich weiß, dass es bereits eine akzeptierte Antwort darauf gibt, aber ich denke, diese Antwort ist viel einfacher zu verstehen. Lassen Sie einfach die Klickfunktion false zurückgeben. 

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

<script>
$('#subselection').click(function() {
    alert("do some code here");
    return false;
});
</script>
1
Richard Kersey

Sie können alternativ einfach den Button-Tag/das Widget direkt <button>TEST</button> verwenden, der ordnungsgemäß deaktiviert wird. Wenn Sie nur ein Ereignis abfangen und JavaScript ausführen, können Sie nicht sicher sein, welchen Vorteil die Verwendung eines Links hat.

0
Danny C