Désactiver les Boutons en jQuery Mobile

Question

C'est pour jQuery Mobile. Pas tous réguliers jQuery réponses de travail.

Je ne peux pas obtenir mes boutons pour désactiver dans jQuery Mobile.

jQuery Mobile est dit d'utiliser

$('input').button('disable');   

Mais j'obtiens un message d'erreur dans Firebug:

uncaught exception: ne peut pas appeler des méthodes sur le bouton avant de l'initialisation; tenté d'appeler la méthode "désactiver".

C'est dans le document de prêt de la section de ma page donc je ne sais pas comment il n'est pas encore initialisé.

J'ai essayé d'appeler le bouton directement par son id, mais qui ne fonctionne pas.

J'ai essayé:

$('button').attr("disabled", "disabled");

Ne fonctionne pas.

J'ai aussi un commutateur de commande qui va permettre à un bouton de fonction sur quelle en est la valeur. J'ai que la partie à l'endroit où son acheminement à droite "cas", mais les boutons activer/désactiver chose en jQuery mobile ne fonctionne pas.

code: http://pastebin.com/HGSbpAHQ

Answer 1

Mise à JOUR:

Depuis que cette question devient encore beaucoup de succès, je suis aussi d'ajouter de l'actuel jQM Docs sur la façon de désactiver le bouton:

• http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

Mise À Jour Des Exemples:

permettre à permettre à un handicapé bouton de formulaire

$('[type="submit"]').button('enable');  

désactiver désactiver un bouton de formulaire

$('[type="submit"]').button('disable'); 

mettre à jour les bouton de formulaire
Si vous manipulez un bouton de formulaire via JavaScript, vous devez appeler la méthode refresh pour mettre à jour le le style visuel.

$('[type="submit"]').button('refresh');

Original Post Ci-Dessous:

Live Exemple: http://jsfiddle.net/XRjh2/2/

Mise à JOUR:

À l'aide de @naugtur exemple ci-dessous: http://jsfiddle.net/XRjh2/16/

Mise à JOUR #2:

Bouton lien, exemple:

• http://jsfiddle.net/gRLYQ/6/

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

Liens de style comme les boutons ont tous les mêmes options visuelles comme vrai basée sur la forme des boutons ci-dessous, mais il ya quelques différences importantes. Basé sur un lien de boutons ne font pas partie de l'plugin bouton et juste utiliser le sous-jacent buttonMarkup plugin pour générer le bouton styles de sorte le bouton du formulaire méthodes (activer, désactiver, actualisation) ne sont pas pris en charge. Si vous avez besoin de désactiver un lien basé sur le bouton (ou de n'importe quel élément), il est possible d'appliquer les handicapés de la classe ui-handicapés-vous avec JavaScript pour obtenir le même effet.

Answer 2

uncaught exception: ne peut pas appeler méthodes sur le bouton avant l'initialisation; tenté d'appeler la méthode de "désactiver".

cela signifie que vous essayez d'appeler un élément qui n'est pas traitée comme un bouton, parce que personne n' .button méthode a été appelée sur elle. Par conséquent, votre problème DOIT être le sélecteur.

Vous sélectionnez toutes les entrées $('input'), de sorte qu'il essaie d'appeler la méthode disable de bouton de widget de l'espace de noms non seulement sur les boutons, mais sur des saisies de texte.

$('button').attr("disabled", "disabled"); ne fonctionnera pas avec jQuery Mobile, parce que vous modifiez le bouton qui est invisible ils et remplacé par une majoration de jQuery Mobile génère.

Vous devez utiliser jQueryMobile de la méthode de désactivation du bouton avec un bon sélecteur comme:

$('div#DT1S input[type=button]').button('disable');

Answer 3

Si je suis en train de lire cette question correctement, vous avez peut-être manqué un jQuery mobile "bouton" widget n'est pas la même chose qu'un bouton HTML de l'élément. Je pense que cela se résume à vous ne pouvez pas appeler $('input').button('disable') sauf si vous avez déjà appelé $('input').button(); pour initialiser un jQuery Mobile bouton de widget sur votre entrée.

Bien sûr, vous ne voulez pas être à l'aide de jQuery widget bouton de fonctionnalité, dans lequel cas d'Alexandre réponse devrait vous mettre à droite.

Answer 4

Ce qui semble être nécessaire de définir réellement le bouton comme un bouton de widget.

J'ai eu le même problème (bêta 1)

Je n'ai

$("#submitButton").button();

dans la fenêtre de mon prêt gestionnaire, après cela, il a travaillé pour le faire comme il est dit dans les docs, c'est à dire:

$("#submitButton").button('disable'); 

Je suppose que cela a à voir avec ce que jqm est la conversion de la balise, mais n'est pas réellement instatiating un vrai bouton de widget pour les boutons et les boutons de lien.

Answer 5

J'ai créé un widget qui peut complètement désactiver ou de présenter une vue en lecture seule du contenu sur votre page. Il désactive tous les boutons, les ancres, supprime tous les événements de clic, etc., et re-permettre à tous de retour de nouveau. Il prend même en charge tous les widgets jQuery UI. Je l'ai créé pour une application que j'ai écrit au travail. Vous êtes libre de l'utiliser.

Check it out at ( http://www.dougestep.com/dme/jquery-disabler-widget ).