webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie Schaltflächen in jQuery Mobile

Dies ist für jQuery Mobile. Nicht alle regulären jQuery-Antworten funktionieren.

Ich kann meine Schaltflächen in jQuery Mobile nicht deaktivieren.

jQuery Mobile sagt zur Verwendung

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

Ich bekomme aber eine Fehlermeldung in Firebug:

nicht erfasste Ausnahme: Methoden können vor der Initialisierung nicht mit der Taste aufgerufen werden. Es wurde versucht, die Methode 'disable' aufzurufen.

Es befindet sich im dokumentenbereiten Abschnitt meiner Seite, daher weiß ich nicht, wie es noch nicht initialisiert ist.

Ich habe versucht, die Schaltfläche direkt über ihre ID aufzurufen, aber das funktioniert nicht.

Ich habe es versucht:

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

Funktioniert nicht.

Ich habe auch einen Schaltbefehl, der eine Schaltfläche aktiviert, die auf dem Wert basiert. Ich habe den Teil, in dem er nach rechts "case" -Anweisungen routet, aber das Aktivieren/Deaktivieren der Schaltflächen in jQuery mobile funktioniert nicht.

code: http://Pastebin.com/HGSbpAHQ

63
swg1cor14

AKTUALISIEREN:

Da diese Frage immer noch viele Treffer hat, füge ich auch die aktuellen jQM Docs hinzu, um den Button zu deaktivieren:

Aktualisierte Beispiele:

Aktivieren Sie eine deaktivierte Formularschaltfläche.

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

deaktivieren Sie eine Formularschaltfläche deaktivieren

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

Aktualisieren Sie die Formularschaltfläche
Wenn Sie eine Formularschaltfläche über .__ bearbeiten. JavaScript müssen Sie die Aktualisierungsmethode aufrufen, um die .__ zu aktualisieren. visuelles Styling.

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

Originalbeitrag unten:

Live-Beispiel: http://jsfiddle.net/XRjh2/2/

AKTUALISIEREN:

Verwenden Sie das folgende @naugtur-Beispiel: http://jsfiddle.net/XRjh2/16/

UPDATE # 2:

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 true formularbasierte Schaltflächen unten, aber es gibt einige wichtige Unterschiede . Verknüpfungsbasierte Schaltflächen sind nicht Teil des Schaltflächen-Plugins und verwenden nur das zugrunde liegende buttonMarkup-Plugin, um die Schaltflächenstile zu generieren Die Formularschaltflächenmethoden (Aktivieren, Deaktivieren, Aktualisieren) werden nicht unterstützt. Wenn Sie eine linkbasierte Schaltfläche (oder ein anderes Element) deaktivieren müssen, ist es Es ist möglich, die deaktivierte Klasse ui-disabled mit .__ anzuwenden. JavaScript, um den gleichen Effekt zu erzielen.

106
Phill Pafford

nicht erfasste Ausnahme: kann nicht aufgerufen werden Methoden auf Schaltfläche vor Initialisierung; hat versucht aufzurufen Methode 'deaktivieren'.

dies bedeutet, dass Sie versuchen, es für ein Element aufzurufen, das nicht als Schaltfläche behandelt wird, da für dieses keine .button-Methode aufgerufen wurde. Daher MUSS Ihr Problem der Wahlschalter sein.

Da Sie alle Eingänge $('input') auswählen, versucht sie, die Methode disable aus dem Button-Widget-Namespace nicht nur über Schaltflächen, sondern auch über Texteingaben aufzurufen.

$('button').attr("disabled", "disabled"); funktioniert nicht mit jQuery Mobile, da Sie die Schaltfläche ändern, die versteckt ist und durch ein Markup ersetzt wird, das von jQuery Mobile generiert wird. 

Sie HABEN verwenden Sie die Methode von jQueryMobile zum Deaktivieren der Schaltfläche mit einem richtigen Selektor wie:

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

Es scheint notwendig zu sein, die Schaltfläche tatsächlich als Schaltflächen-Widget zu definieren. 

Ich hatte das gleiche problem (in beta 1) 

Ich tat

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

in meinem Fenster fertig Handler, danach hat es funktioniert, wie es in den docs gesagt wird, d. h .:

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

Ich denke, das hat damit zu tun, dass jqm das Markup konvertiert, aber nicht wirklich ein Widget für Buttons und Link-Buttons enthält.

4
Jörgen Lindell

Wenn ich diese Frage richtig lese, fehlt Ihnen möglicherweise, dass ein Widget "jQuery mobile" Button nicht dasselbe wie ein HTML-Schaltflächenelement ist. Ich denke, das läuft darauf hinaus, dass Sie $('input').button('disable') nicht aufrufen können, es sei denn, Sie haben zuvor $('input').button(); aufgerufen, um ein jQuery Mobile-Schaltflächen-Widget für Ihre Eingabe zu initialisieren.

Natürlich möchten Sie möglicherweise nicht die Widget-Funktion für jQuery-Schaltflächen verwenden. In diesem Fall sollte die Antwort von Alexander Ihnen Recht geben.

4
RwwL

Ich habe ein Widget erstellt, das eine schreibgeschützte Ansicht des Inhalts Ihrer Seite vollständig deaktivieren oder darstellen kann. Es deaktiviert alle Schaltflächen, Anker, entfernt alle Klickereignisse usw. und kann sie alle wieder aktivieren. Es unterstützt sogar alle jQuery-Benutzeroberflächen-Widgets. Ich habe es für eine Anwendung erstellt, die ich bei der Arbeit geschrieben habe. Sie können es frei benutzen. 

Überprüfen Sie es unter ( http://www.dougestep.com/dme/jquery-disabler-widget ).

3
dgestep

Basierend auf meinen Erkenntnissen ...

Dieser Javascript-Fehler tritt auf, wenn Sie button () auf einem Element mit einem Selektor ausführen und versuchen, eine Funktion/Methode von button () mit einem anderen Selektor auf demselben Element zu verwenden.

Hier ist zum Beispiel der HTML-Code:

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

Sie führen also button () darauf aus:

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

Dann versuchen Sie, es zu deaktivieren. Diesmal wird die Klasse nicht verwendet, als Sie sie initiiert haben, sondern die ID. Dann wird der Fehler angezeigt, da dieser Thread den Titel hat:

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

Verwenden Sie die Klasse also lieber erneut, wenn Sie sie initiiert haben, um das Problem zu lösen.

2
tribulant

Versuchen Sie eine der folgenden Aussagen:

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

oder

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

UPDATE

So zielen Sie auf eine bestimmte Schaltfläche in dem von Ihnen angegebenen HTML-Code ab:

$('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>

Diese Arbeit für mich müssen Sie möglicherweise die Logik trainieren, indem Sie -enable deaktivieren 

2
Yene Mulatu

Sie erhalten diesen Fehler wahrscheinlich, weil sich das Element noch nicht im DOM befindet. $ (Dokument) .ready (); wird nicht funktionieren. Versuchen Sie, Ihren Code einem pageinit-Ereignishandler hinzuzufügen.

Hier ist ein Arbeitsbeispiel:

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

Hoffe das hilft jemandem

0
robnardo

Für jQuery Mobile 1.4.5:

für Ankerschaltflächen lautet die CSS-Klasse: ui-state-disabled, und für Eingabeschaltflächen reicht es aus, das Attribut disabled zu wechseln.

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>

Übrigens, für Eingabeschaltflächen gibt es eine alternative Methode:

Aktivieren:

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

Deaktivieren:

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

Für den Link-Button 

Das Aufrufen der .button('enable')-Methode hat nur eine Auswirkung, funktionell jedoch nicht.

Aber ich habe einen Trick. Wir könnten das HTML5 data--Attribut verwenden, um den Wert von href und onclick zu speichern/zu tauschen.

sehen:

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

quellcode-Modus:

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

0
Vikas

Fügen Sie zur Deaktivierung einer Schaltfläche die Klasse disabled hinzu. schreiben

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