Désactiver les Boutons en jQuery Mobile

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 "l'affaire" états, mais les boutons activer/désactiver chose en jQuery mobile ne fonctionne pas.

code: http://pastebin.com/HGSbpAHQ

HTML Merci de nous ressemble le sélecteur est faux.
Sélecteurs de regarder OK en général, mais nous devons savoir que vous avez <input type='button'> ou <button>...</button>
Nous avons besoin de voir votre code HTML comme Alexandre a dit
<div id="DT1S"> <input type="button" name="DT1S" value="Start Job" /> </div> <div id="STS"> <input type="button" name="STS" value="Start Surveillance" /> </div> <div id="STE"> <input type="button" name="STE" value="End Surveillance" /> </div> <div id="DT2E"> <input type="button" name="DT2E" value="End Job" /> </div>
Le doc a dit: "Les méthodes suivantes s'appliquent uniquement à la forme des boutons. Basé sur un lien de boutons n'ont pas toutes les méthodes associées"

InformationsquelleAutor swg1cor14 | 2011-05-03

jquery jquery-mobile

107

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:

activer activer une forme désactivée bouton
```
$('[type="submit"]').button('enable');  
```
désactiver désactiver un bouton de formulaire
```
$('[type="submit"]').button('disable'); 
```
mettre à jour le formulaire de bouton
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 de 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.
- ur l'exécution de cet exemple juste avec jquery. il ne fonctionne pas sur mon application avec jquery mobile
- l'exemple que je donne est à l'aide de la jQM cadre et ne désactivez le bouton, Voir bouton2. Si vous pouviez poster un peu plus de code à exactement comment vous essayez de créer et de désactiver le bouton qui vous aident vous donner une bonne réponse
- pastebin.com/u/swg1cor14
- Il ne fonctionne pas si le bouton est de type="submit". Sinon il fonctionne parfaitement, merci.
- Voici la mise à jour de jQM Docs: jquerymobile.com/demos/1.0/docs/buttons/buttons-methods.html $('[type='submit']').bouton ("disable");
- Elle n'en résout, merci
- Me demande pourquoi ils ne pouvaient pas ajouter ce pour les autres boutons. Ils pourraient stocker les cliqué état dans un attribut de données. En tout cas merci!
- PS: (...ils pourraient stocker les cliqué état dans un attribut de données...) ou, mieux encore, juste vérifié hasClass('ui-disabled')
InformationsquelleAutor Phill Pafford
10

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 ne .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 bouton de widget de l'espace de noms non seulement sur les boutons, mais sur des saisies de texte trop.

$('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 ONT POUR utilisation jQueryMobile de la méthode de désactivation du bouton avec un bon sélecteur de comme:
```
$('div#DT1S input[type=button]').button('disable');
```
- +1 beau travail @naugtur, jsfiddle.net/XRjh2/16
InformationsquelleAutor naugtur
4

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.
- Hmmm... peut-être hors de propos car il semble jQuery mobile .bouton automatiquement si vous avez utilisé data-role="button" dans votre balise (le saviez vous?)
- Est le data-role="button" également pertinent de pages html (pas mobile)? Quelle version?
- Sumid, pas sûr de comprendre votre question, mais si cela permet de: data-role="button" est une convention utilisée par jQuery Mobile pour signaler les éléments pour être auto-initialisé comme le bouton de contrôle (tel que défini par la bibliothèque). Il n'y a rien qui vous empêche d'utiliser l'attribut de données sur les "pages html" toutefois vous le souhaitez. Il n'est pas apparemment utilisé de la même manière dans l'intégralité de la bibliothèque jQuery UI. jqueryui.com/button
- Ok. Qui répond à ma question. Merci.
InformationsquelleAutor RwwL
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 ma fenêtre 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.

InformationsquelleAutor Jörgen Lindell
3

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 jQuery UI widgets ainsi. 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 ).

InformationsquelleAutor dgestep
2

Essayer l'un des énoncés ci-dessous:

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

ou

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

Mise à JOUR

Pour cible un bouton particulier, vu le code HTML que vous avez fournies:

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

http://jsfiddle.net/kZcd8/
- Nope. aucun de ces travaux
- Étant donné que le code que vous avez fournies dans le commentaire qu'il fait - vérifier le jsfiddle lien jsfiddle.net/kZcd8
InformationsquelleAutor 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>

Ce un travail pour moi, vous pourriez avoir besoin de séance d'entraînement de la logique, de désactiver -activer

InformationsquelleAutor Yene Mulatu

2

Selon mes constatations...

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

Par exemple, voici le code HTML:
```
<input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" />
```
De sorte que vous bouton execute() sur celui-ci:
```
jQuery(document).ready(function() { jQuery('.mybuttonclass').button(); });
```
Ensuite, vous essayez de le désactiver, cette fois, non pas en utilisant la classe que vous avez initié, mais plutôt à l'aide de l'ID, alors vous obtiendrez l'erreur comme ce fil est intitulé:
```
jQuery(document).ready(function() { jQuery('#mybuttonid').button('option', 'disabled', true); });
```
Donc plutôt d'utiliser la classe à nouveau comme vous l'a initié, qui va résoudre le problème.

InformationsquelleAutor tribulant
0

Pour bouton de lien,

Appel .button('enable') méthode ne donne que de l'effet, mais fonctionnellement ne pas.

Mais j'ai un truc. Nous pourrions utiliser HTML5 data- attribut save/valeur d'échange de href et onclick.

voir:

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

mode code source:

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

InformationsquelleAutor Vikas

Vous obtenez cette erreur, probablement parce que l'élément n'est pas dans les DOM encore. $(document).prêt(); ne fonctionne pas. Essayez d'ajouter votre code à un pageinit gestionnaire d'événement.

Ici est un exemple:

<!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>

Espère que ça aide quelqu'un

InformationsquelleAutor robnardo

0

Pour la désactivation d'un bouton ajouter classe css disabled à elle . écrire
```
$("button").addClass('disabled')
```
InformationsquelleAutor ofskyMohsen

Pour jQuery Mobile 1.4.5:

pour ancrer les boutons, la classe CSS est: ui-state-disabled, et pour les boutons d'entrée c'est juste assez pour faire basculer le disabled attribut.

JS:

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","");
}

HTML:

<!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 y a une autre méthode:

Permettre:

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

Désactiver:

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

InformationsquelleAutor deblocker

Vous devez vous connecter pour publier un commentaire.