web-dev-qa-db-fra.com

Désactiver les boutons dans jQuery Mobile

Ceci est pour jQuery Mobile. Toutes les réponses jQuery classiques ne fonctionneront pas.

Je ne parviens pas à désactiver mes boutons dans jQuery Mobile.

jQuery Mobile dit d'utiliser

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

Mais je reçois un message d'erreur dans Firebug:

exception non interceptée: impossible d'appeler des méthodes sur un bouton avant l'initialisation; a tenté d'appeler la méthode 'disable'.

C’est dans la section Document Ready de ma page, donc je ne sais pas comment il n’a pas encore été initialisé.

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

J'ai essayé:

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

Ça ne marche pas.

J'ai aussi une commande switch qui activera un bouton en fonction de la valeur. J'ai cette partie où son acheminement vers les déclarations "cas" correctes, mais les boutons activer/désactiver dans jQuery mobile ne fonctionnent pas.

code: http://Pastebin.com/HGSbpAHQ

jqueryjquery-mobile
63
swg1cor14

METTRE À JOUR:

Comme cette question reçoit encore beaucoup de réponses, j'ajoute également les documents jQM actuels sur la façon de désactiver le bouton:

Exemples mis à jour:

enable active un bouton de formulaire désactivé

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

disable désactive un bouton de formulaire

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

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

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

Message original ci-dessous:

Exemple en direct: http://jsfiddle.net/XRjh2/2/

METTRE À JOUR:

En utilisant l'exemple @naugtur ci-dessous: http://jsfiddle.net/XRjh2/16/

MISE À JOUR # 2:

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 stylisés comme des boutons ont toutes les mêmes options visuelles que true boutons basés sur la forme ci-dessous, mais il y a quelques différences importantes . Les boutons basés sur des liens ne font pas partie du plug-in, ils utilisent seulement le plugin buttonMarkup sous-jacent pour générer les styles de boutons de manière les méthodes de bouton de formulaire (activer, désactiver, actualiser) ne sont pas supportées . Si vous devez désactiver un bouton basé sur des liens (ou un élément), c’est possible d'appliquer vous-même la classe pour handicapés-désactivé avec JavaScript pour obtenir le même effet.

106
Phill Pafford

exception non interceptée: impossible d'appeler méthodes sur le bouton avant initialisation; tenté d'appeler méthode 'désactiver'.

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

Vous sélectionnez toutes les entrées $('input'). Il essaie donc d'appeler la méthode disable depuis l'espace de nom du widget de bouton, non seulement sur les boutons, mais également sur les entrées de texte.

$('button').attr("disabled", "disabled"); ne fonctionnera pas avec jQuery Mobile, car vous modifiez le bouton caché et remplacé par une balise générée par jQuery Mobile. 

Vous DEVREZ utiliser la méthode de jQueryMobile pour désactiver le bouton avec un sélecteur correct like:

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

Ce qui semble être nécessaire est de définir le bouton en tant que widget de bouton. 

J'ai eu le même problème (en beta 1) 

J'ai fait

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

dans mon gestionnaire de prêt de fenêtre, après que cela a fonctionné comme il est dit dans la documentation, à savoir:

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

Je suppose que cela a à voir avec le fait que jqm convertit le balisage, mais n’installe pas réellement un widget de bouton réel pour les boutons et les liens.

4
Jörgen Lindell

Si je lis correctement cette question, il se peut que le widget "bouton" de jQuery mobile ne soit pas la même chose qu'un élément de bouton HTML. Je pense que cela revient à dire que vous ne pouvez pas appeler $('input').button('disable') sauf si vous avez déjà appelé $('input').button(); pour initialiser un widget de bouton jQuery Mobile sur votre entrée.

Bien sûr, vous pouvez ne pas vouloir utiliser la fonctionnalité de widget de bouton jQuery, auquel cas la réponse d'Alexander devrait vous donner raison.

4
RwwL

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

Découvrez-le sur ( http://www.dougestep.com/dme/jquery-disabler-widget ).

3
dgestep

Sur la base de mes découvertes ...

Cette erreur Javascript se produit lorsque vous exécutez button () sur un élément avec un sélecteur et essayez d'utiliser une fonction/méthode de button () avec un sélecteur différent sur le même élément.

Par exemple, voici le code HTML:

<input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" />

Donc vous exécutez le bouton () dessus:

jQuery(document).ready(function() { jQuery('.mybuttonclass').button(); });

Ensuite, vous essayez de le désactiver, cette fois en n'utilisant pas la classe telle que vous l'avez initiée mais en utilisant l'ID, vous obtiendrez l'erreur lorsque ce fil est intitulé:

jQuery(document).ready(function() { jQuery('#mybuttonid').button('option', 'disabled', true); });

Donc, utilisez plutôt la classe à nouveau comme vous l'avez initiée, cela résoudra le problème.

2
tribulant

Essayez l'une des déclarations ci-dessous:

$('input[type=submit]').attr('disabled','disabled');

ou

$('input[type=button]').attr('disabled','disabled');

UPDATE

Pour cibler un bouton particulier, en fonction du code HTML que vous avez fourni:

$('div#DT1S input[type=button]').attr('disabled','disabled');

http://jsfiddle.net/kZcd8/

2
xandercoded
  $(document).ready(function () {
        // Set button disabled

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


        $(".name").bind("change", function (event, ui) {

            var edit = $("#your_name").val();
            var edit_surname = $("#your_surname").val();
            console.log(edit);

            if (edit != ''&& edit_surname!='') {
                //name.addClass('hightlight');
                $('#save_info').button("enable");
                console.log("enable");

                return false;
            } else {

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

                console.log("disable");
            }

        });


    <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d">
        <li>
            <input type="text" name="your_name" id="your_name" class="name" value="" placeholder="Frist Name" /></li>
        <li>
            <input type="text" name="your_surname" id="your_surname"  class="name" value="" placeholder="Last Name" /></li>
        <li>
            <button data-icon="info" href="" data-role="submit" data-inline="true" id="save_info">
            Save</button>

Celui-ci fonctionne pour moi, vous aurez peut-être besoin d'entraîner la logique, de désactiver -enable 

2
Yene Mulatu

Vous obtenez cette erreur probablement parce que l'élément n'est pas encore dans le DOM. $ (document) .ready (); ne fonctionnera pas. Essayez d’ajouter votre code à un gestionnaire d’événements pageinit.

Voici un exemple de travail:

<!DOCTYPE html> 
<html> 
<head>
    <title>Button Disable</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body>
    <div id="MyPageId" data-role="page">
        <div data-role="header">
            <h1>Button Disable</h1>
        </div>
        <div data-role="content">
            <button id="button1" type="button" onclick="javascript:alert('#button1 clicked');">Button 1</button>
            <button id="button2" type="button" onclick="javascript:alert('#button2 clicked');">Button 2</button>
        </div>
        <div data-role="footer">
            <p>footer</p>
        </div>
    </div>
    <script type="text/javascript">//<![CDATA[
        $('#MyPageId').bind("pageinit", function (event, data) {
            $("#button1").button("disable");
        });
    //]]></script>
</body>
</html>

J'espère que ça aide quelqu'un

0
robnardo

Pour jQuery Mobile 1.4.5:

pour les boutons d'ancrage, la classe CSS est: ui-state-disabled, et pour les boutons de saisie, il suffit simplement de basculer l'attribut disabled.

function toggleDisableButtons() {
  $("#link-1").toggleClass("ui-state-disabled", !$("#link-1").hasClass("ui-state-disabled"));
  $("#button-1").attr("disabled") ? $("#button-1").removeAttr("disabled") : $("#button-1").attr("disabled","");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-1">
  <div role="main" class="ui-content">
    <button class="ui-btn" onclick="toggleDisableButtons();">Toggle disabled</button>
    <a id="link-1" href="#" class="ui-btn ui-state-disabled">Anchor</a>
    <button id="button-1" disabled="">Button</button>
    
  </div>
</div>
</body>
</html>

BTW, pour les boutons d’entrée, il existe une autre méthode:

Activer:

$(".class").prop("disabled", false).removeClass("ui-state-disabled");

Désactiver:

$(".class").prop("disabled", true).addClass("ui-state-disabled");
0
deblocker

Pour le bouton de lien, 

L'appel de la méthode .button('enable') ne donne que des effets, mais non fonctionnellement.

Mais j'ai un truc. Nous pourrions utiliser l’attribut HTML5 data- pour enregistrer/échanger la valeur de href et onclick.

voir:

http://jsbin.com/ukewu3/74/

mode de code source:

http://jsbin.com/ukewu3/74/edit

0
Vikas

Pour désactiver un bouton, ajoutez la classe css disabled. écrire

$("button").addClass('disabled')
0
ofskyMohsen