so deaktivieren Sie die jquery-dialog-Tasten

Meine Bedürfnisse: ich bin mit einem jquery modal dialog. Ich habe einige Tasten auf Sie. Ich möchte deaktivieren Sie eine Schaltfläche, wenn Sie dialog öffnet sich, aber wollen, um es zu aktivieren, nach einigen bestimmten Betrieb.

, Was ich getan habe: kann ich deaktivieren Sie die Schaltfläche hinzufügen dieser AnweisungjQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

Problem: Aber jetzt, was ich will, ist, dass, wenn die Schaltfläche Bearbeiten angeklickt wird habe ich eine bestimmte Aktion ausführen, nach dem ausführen dieser Aktion die `Problem' - Taste werden aktivieren.

Mein code ist unten.

 jQuery(newdiv).dialog({
    width:500,
    height:275,
    dialogClass:'alert',
    modal: true,
    close: function(event, ui) { jQuery(newdiv).html(''); },
    buttons: {
        "issue":function()
        {

        },
        "Edit":function()
        {
          //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement
          jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
        },
        "Cancel":function(){jQuery(this).dialog('close');},
    }
});
jQuery(".ui-dialog-titlebar").hide();
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'});
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");
  • nur setzen Sie das Attribut auf false, auf edit klicken...hast du das gemacht?
  • jup, aber zu keinem Ergebnis
  • Nein, Sie müssen entfernen Sie das Attribut disabled, um zu ermöglichen, etwas, das nur precence der Attribut-deaktiviert ein Eingang
  • Peluchetti siehe meine editierte Frage
InformationsquelleAutor Awais Qarni | 2011-07-29
  1. 19

    Es gibt keine Notwendigkeit, mess around mit den Klassen auf die Tasten und es ist wahrscheinlich nicht eine gute Idee, sowieso. Die Tasten in einen jQuery-UI dialog sind jQuery-UI-Tasten und Sie unterstützen disable und enable Methoden in die üblichen jQuery-UI-Stil: 

    $button.button('enable');  //Enable the button
$button.button('disable'); //Disable the button

    Zunächst durch dies ersetzen: 

    jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

    Mit dabei:

    jQuery('.ui-dialog button:nth-child(1)').button('disable');

    Dann im edit-handler, dies zu tun:

    jQuery('.ui-dialog button:nth-child(1)').button('enable');

    Um die Schaltfläche zu aktivieren.

    Soweit die Selektoren gehen, die wichtigsten dialog <div> hat eine ui-dialog Klasse, so beginnen wir mit .ui-dialog. Dann wollen wir die Schaltflächen in dem dialog " suchen wir für <button> Elemente; das gibt uns .ui-dialog button. Die Schaltflächen im Dialogfeld aufgelistet sind, von Links nach rechts in der gleichen Reihenfolge wie in der buttons option, um das Dialogfeld. Es gibt verschiedene Möglichkeiten, um den ersten button:

    Ging ich mit :nth-child das ist ein CSS3-Selektor:

    Den :nth-child(an+b) pseudo-Klasse notation repräsentiert ein element, dass hat an+b-1 Geschwister vor es in dem Dokument-Baum, für jede positive ganze Zahl oder null-Wert der n, und hat ein übergeordnetes element.

    So button:nth-child(1) ist die erste Schaltfläche. Ich dachte, dass wenn Sie waren, die Dinge auf einen button, würde Sie wahrscheinlich am Ende tut Dinge, um anderen Tasten, so zum Beispiel, könnten Sie das tun .ui-dialog button:nth-child(2) um die "Bearbeiten" - button, und das wäre line-up sehr schön mit dem Selektor verwendet, für die "Thema" - button.

    • Seltsam dude. Ihre arbeiten. Aber ich bin nicht in der Lage, dies zu verstehen. Möchten Sie ein wenig mehr beschreiben, wie du das gemacht hast. wie jQuery('.ui-dialog button:nth-child(1)' feststellen, dass bestimmte Taste?
    • Bitte siehe mein update.
    • Dude das ist genial. Völlig verstanden. Hervorragend. +1 für die gut Erklärung.
    • Dies war die einzige Lösung, die von vielen, die für mich gearbeitet. Vielen Dank!
    InformationsquelleAutor mu is too short
  2. 1
    "Edit":function()
        {
       jQuery(".ui-dialog-buttonpane button:contains('Issue')")
             .removeAttr("disabled")
             .removeClass("ui-state-disabled")
             .addClass('ui-state-default');

        }
    InformationsquelleAutor Rafay
  3. 1

    Könnten Sie tun:

        "Edit":function()
    {
       //perform other actions
      jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
    },

    Denken Sie daran, ein input-element mit dem Attribut disabled ist immer deaktiviert, unabhängig von Wert das Attribut zu: $('input').attr('disabled', false) gleich $('input').attr('disabled', 'disabled')

    • Vielen Dank für Ihre Antwort. Eigentlich bin ich öffnen Sie ein neues Dialogfeld auf die Schaltfläche Bearbeiten. Wenn neue Dialog schließen möchte ich ermöglichen, die issue Taste der übergeordneten dialog. Ich habe auch bearbeitet meine Frage.
    • Ist es nur ein button namens Problem?Wenn ja, schauen Sie, wie ich meine Antwort bearbeitet
    • Ja, es ist einzigartig
    • Ok, können Sie den code in die Antwort
    InformationsquelleAutor Nicola Peluchetti
  4. 0

    wenn Sie andere dialog in den Kontext, auf diese Weise
    jQuery('.ui-dialog button:nth-child(1)').button('disable');
    kann dazu führen, einige problem.

    gibt es ein paar Schritte, um dies zu verbessern :
    1.: suchen Sie den dialog Griff

    $mydialog = $("#divfordialog");

    2.: finden Sie die Schaltfläche panel

    $buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane");

    3.: suchen Sie die Ziel-Taste, übernehmen Sie die Schaltfläche name ist BTN

    $buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")');

    zuletzt: behandeln(z.B.:deaktivieren, aktivieren);

    $buttonwanttocontrol.button("disable");
$buttonwanttocontrol.button("enable");

    offently, wollen wir init unseren dialog-Schaltfläche status, wenn es offen ist, wird Arbeit finden:

    $("divfordialog").dialog({
    ...
    buttons : {
        ...
        "BTN" : function () {},
        ...
    },
    open : function () {
        if (shouldDisableBtn()) {
            $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable")
        }
    }
    ...
});
    InformationsquelleAutor hotrhino
Schreibe einen Kommentar