web-dev-qa-db-fra.com

Comment désactiver un bouton de lien dans jQuery Mobile?

J'ai un site Web jQuery Mobile Beta 1 avec jQuery 1.6.1 bouton de lien comme ceci:

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

Et dans document.ready, j'ai défini l'événement click:

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

Je veux désactiver ce "bouton de liaison" et j'ai essayé

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

Et cette commande définit le style du bouton comme il est désactivé, mais l'événement click fonctionne.

J'ai aussi essayé

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

et $ ('# sous-sélection'). prop ('désactivé'); donne vrai mais ce n'est pas désactivé.

Quelqu'un a une bonne idée.

javascriptjquerymobilejquery-mobile
14
RickardP

L'élément a n'a pas de propriété disabled. Donc, en définir un n'affectera pas les gestionnaires d'événements que vous pourriez avoir associés.

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

Pour une liste des attributs disponibles, consultez la référence HTML 5 .

Pour résoudre votre problème, vous pouvez, par exemple, attribuer la valeur disabled à data dans l'élément:

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

et dans votre événement, vérifiez si son ensemble:

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

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

13
Niklas

Exemple de bouton de lien:

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>

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

Les liens stylés comme des boutons ont toutes les mêmes options visuelles que les vrais boutons basés sur un formulaire Ci-dessous, mais il existe quelques différences importantes. Les boutons basés sur des liens ne font pas partie du plugin, mais seulement. utilisez simplement le plugin buttonMarkup sous-jacent pour générer les styles de bouton afin que les méthodes de bouton de formulaire (activer, désactiver, actualiser) ne soient pas prises en charge. Si vous devez désactiver un lien basé sur un bouton (ou n’importe quel élément), il est possible d’appliquer vous-même la classe désactivée ui-désactivé avec JavaScript pour obtenir le même effet.

25
Phill Pafford

Pas besoin de jquery/javascript dans ce cas. Ajoutez simplement une classe 'ui-disabled'.

Comme par exemple:

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

C’est ce que je fais et ça marche pour moi;)

9
Gillian Lo Wong

essayez d'utiliser

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

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

cela semble fonctionner visuellement pour afficher un style activer/désactiver ... CEPENDANT, le "bouton" est toujours cliquable (alors faites attention!: P)

2
Erik Yuzwa

Je sais que la réponse à cette question est déjà acceptée, mais je pense que cette réponse est beaucoup plus facile à comprendre. Il suffit que la fonction click retourne 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>
1
Richard Kersey

Vous pouvez également utiliser la balise bouton/widget directement <button>TEST</button> qui est correctement désactivé. Si vous l'utilisez simplement pour attraper un événement et exécuter du JavaScript, vous ne savez pas quel avantage il y aurait à utiliser un lien.

0
Danny C