Jak mogę wyłączyć przycisk w oknie dialogowym jQuery z funkcji?

Mam okno dialogowe jQuery, które wymaga od użytkownika wprowadzenia pewnych informacji. W tej formie mam przycisk „kontynuuj”. Chciałbym, aby ten przycisk „Kontynuuj” był włączony tylko wtedy, gdy wszystkie pola zawierają w sobie zawartość, w przeciwnym razie pozostanie on wyłączony.

Napisałem funkcję, która jest wywoływana za każdym razem, gdy zmienia się status pola. Nie wiem jednak, jak włączyć i wyłączyć przycisk dialogowy w tej funkcji. Co powinienem zrobić?

Ups i zapomniałem wspomnieć, że te przyciski zostały utworzone w następujący sposób:

$(function() {
  $("#dialog").dialog({
    bgiframe: true,
    height: 'auto',
    width: 700,
    show: 'clip',
    hide: 'clip',
    modal: true,
    buttons: {
      'Add to request list': function() {
        $(this).dialog('close');
        $('form').submit();
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  })
});

Chcesz ustawić wyłączoną właściwość

 $('#continueButton').attr("disabled", true);

Aktualizacja : Ahha, teraz widzę złożoność. JQuery Dialog miał pojedynczą linię, która będzie miała zastosowanie (w sekcji „Przyciski”.

 var buttons = $('.selector').dialog('option', 'buttons');

Będziesz musiał pobrać kolekcję przycisków z okna dialogowego, przejrzeć ją, aby znaleźć potrzebny, a następnie ustawić wyłączony atrybut, jak pokazano powyżej.

To jest bardzo proste:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

Nadmiernie komplikujesz proste zadanie; Okno dialogowe jQueryUI ma dwa sposoby ustawiania przycisków bez podania przyczyny.

Jeśli potrzebujesz tylko ustawić moduł obsługi kliknięć dla każdego przycisku, użyj opcji, która pobiera Objectargument. Aby wyłączyć przyciski i podać inne atrybuty, użyj opcji, która pobiera Arrayargument.

Poniższy przykład wyłączy przycisk i poprawnie zaktualizuje jego stan poprzez zastosowanie wszystkich klas i atrybutów jQueryUI CSS.

Krok 1 - Utwórz okno dialogowe za pomocą jednego Arrayz przycisków:

// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
    {
        id: "done"
        text: "Done",
        click: function() { ... }
    },
    {
        id: "cancel"
        text: "Cancel",
        click: function() { ... }
    }
] });

Krok 2 - Włącz / wyłącz przycisk Gotowe po utworzeniu okna dialogowego:

// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");

// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
    if (button.id === "done") {
        button.disabled = true;
    }
})

// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);

Jeśli utworzysz okno dialogowe z identyfikatorami przycisków,

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

możemy wyłączyć przycisk za pomocą następującego kodu:

$("#dialogSave").button("option", "disabled", true);

Chciałem móc znaleźć przycisk według nazwy (ponieważ mam kilka przycisków w oknie dialogowym interfejsu użytkownika jQuery). Mam również kilka okien dialogowych na stronie, więc potrzebuję sposobu, aby uzyskać przyciski określonego okna dialogowego. Oto moja funkcja:

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
                        buttons: {
                                   Cancel: function() { $(this).dialog('close'); },
                                   Submit: function() { ... } 
                             } );

// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
  button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}

To wyłącza przycisk:

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

Musisz dodać identyfikator okna dialogowego, jeśli masz kilka okien dialogowych na stronie.

Oto przykład zmodyfikowanego pytania, aby wyłączyć przycisk po kliknięciu:

$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        height: 'auto',
        width: 700,
        show: 'clip',
        hide: 'clip',
        modal: true,
        buttons: {
            'Add to request list': function(evt) {

                // get DOM element for button
                var buttonDomElement = evt.target;
                // Disable the button
                $(buttonDomElement).attr('disabled', true);

                $('form').submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
}

Pomocne będzie również następujące pytanie: Jak mogę wyłączyć przycisk w oknie dialogowym interfejsu użytkownika jQuery?

Znalazłem prosty sposób na wyłączenie (lub wykonanie dowolnej innej akcji) na przycisku okna dialogowego.

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

Po prostu wybierz element nadrzędny swojego okna dialogowego i znajdź wszystkie przyciski. Następnie sprawdzając tekst przycisku, możesz zidentyfikować swoje przyciski.

Mam tę pracę z metodą, .dialog("widget")która zwraca samo okno dialogowe DIV. Jeśli jesteś w oknie dialogowym metody:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

Z punktu widzenia użyteczności zwykle lepiej pozostawić włączony przycisk, ale wyświetlać komunikat o błędzie, jeśli ktoś próbuje wysłać niekompletny formularz. Doprowadza mnie to do szału, kiedy przycisk, który chcę kliknąć, jest wyłączony i nie mam pojęcia, dlaczego.

Spróbuj tego:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

Oto moja funkcja enableOk dla okna dialogowego jQuery:

function enableOk(enable)
{
    var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');

    if (enable) {
        dlgFirstButton.attr('disabled', '');
        dlgFirstButton.removeClass('ui-state-disabled');
    } else {
        dlgFirstButton.attr('disabled', 'disabled');
        dlgFirstButton.addClass('ui-state-disabled');
    }
}

Przycisk „pierwszy” znajduje się najdalej po prawej stronie. Oboje wyłączacie przycisk i ustawiacie wyłączoną klasę okna dialogowego, aby uzyskać odpowiedni efekt wizualny.

W starszym jQuery UI (wersja 1.7.3) mogłem po prostu użyć

$('.ui-dialog-buttonpane button')[0].disabled=true;

po prostu wyłączyć przycisk na samym elemencie DOM. Po zaktualizowaniu do nowszego interfejsu użytkownika jQuery (wersja 1.8.7) ta metoda nie działa już w przeglądarce Firefox, ale mogę po prostu wywołać funkcję wyłączania i włączania przycisków interfejsu użytkownika jquery w obiektach przycisku jquery:

$('.ui-dialog-buttonpane button').eq(0).button('disable');

haha, właśnie znalazłem ciekawą metodę dostępu do butelek

$("#dialog").dialog({

      buttons: {
        'Ok': function(e) { $(e.currentTarget).button('disable'); }

      }
 });

Wygląda na to, że nie wszyscy wiecie, że w argumentach znajduje się obiekt zdarzenia ...

nawiasem mówiąc, po prostu uzyskuje dostęp do przycisku z oddzwaniania, w ogólnych przypadkach dobrze jest dodać identyfikator dostępu

Jeśli naprawdę chcesz wyłączyć przycisk, zauważyłem, że musisz także wywołać na nim metodę .unbind (). W przeciwnym razie przycisk może być nadal aktywny, a dwukrotne kliknięcie może prowadzić do przesyłania wielu formularzy. Poniższy kod działa dla mnie:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

Znalazłem obejście, które może dotyczyć osób próbujących zrobić coś podobnego. Zamiast wyłączyć przycisk, postawiłem prostyif instrukcję do funkcji, aby sprawdzić, czy pole wyboru zostało zaznaczone.

Jeśli nie, wyświetlał prosty komunikat informujący, że pole należy sprawdzić przed przesłaniem.

Na przykład:

$("#confirmation-dialog").dialog({
    modal: true,
    autoOpen: false,
    width: 600,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    close: function() {
        $('input[type="submit"]')
      .val('Record Reading')
      .attr('disabled', false);
    },
    buttons: {
        'Confirm Reading': function() {
            if($('#check-box').attr("checked")){
                $(this).dialog('close')
                $('form')
                .addClass('confirmed')
                .submit();
            }
            else {
                $('#please-check').show("slide");
            }
        }
    }
});

W każdym razie mam nadzieję, że to komuś pomoże.

Stworzyłem funkcję jQuery, aby nieco ułatwić to zadanie. Po prostu dodaj to do pliku JavaScript:

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
    var text = $(this).text();
    if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
    if(text==name){return this;}
    if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
    if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

Wyłącz przycisk „OK” w oknie dialogowym z klasą „okno dialogowe”:

$('.dialog').dialogButtons('Ok', 'disabled');

Włącz wszystkie przyciski:

$('.dialog').dialogButtons('enabled');

Włącz przycisk „Zamknij” i zmień kolor:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

Mam nadzieję, że to pomoże.

Niestety żadne z podanych tutaj rozwiązań nie działało w kilku oknach dialogowych na stronie.

Problem polegał również na tym, że oryginalne okno dialogowe nie zawiera samego panelu przycisków, ale jest jego rodzeństwem.

Wymyśliłem więc, wybierając takie okno dialogowe:

        var getFirstDialogButton = function (dialogSelector) {
            return $('.ui-dialog-buttonpane button:first',
                    $(dialogSelector).parent()[0]);
        };

...

        $('#my_dialog').dialog({
            open: function(event, ui) {
                getFirstDialogButton("#my_dialog")
                 .addClass("ui-state-disabled").attr('disabled', 'disabled' );
            },

...

a następnie ta sama funkcja getFirstDialogButton () może być później użyta do włączenia przycisku, np. po pomyślnym sprawdzeniu poprawności.

Mam nadzieję, że może komuś pomóc.

Oto przykład, który właśnie wdrożyłem przy użyciu metody Array przypisywania przycisków, która pozwala mi później używać selektorów identyfikatorów - tak jak pierwotnie przyjęta odpowiedź - aby włączyć / wyłączyć przyciski, a nawet pokazać / ukryć je całkowicie, gdy jestem robić.

$( "#dialog-form" ).dialog({
autoOpen: true,
height: 500,
width: 450,
modal: true,
buttons: [
{
    id: "submit_btn",
    text: "Make Apointment",
    click: function() { 
        //do ajax       
    }       
},
{
    id: "cancel_btn",
    text: "Cancel",
    click: function() {
       $( this ).dialog( "close" );
    }
},
{
    id: "ok_btn",
    text: "OK",
    click: function() {
       $( this).dialog('close');
    },
    disabled: "disabled"
}],
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}
});

Po pomyślnym przesłaniu wyłączam i ukrywam dwa przyciski oraz włączam przycisk OK, który był domyślnie wyłączony.

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

Mam nadzieję że to pomoże.

Utworzyłem funkcję podobną do tej, którą zrobił Nick, ale moja metoda nie wymagałaby ustawiania parametru dialogClass, a za pomocą identyfikatora można uzyskać przyciski określonego okna dialogowego (jeśli w aplikacji istnieje więcej niż jeden)

function getDialogButton( dialog_id, button_name) {
    var target = '#'+dialog_id;
    var buttons = $(target).parent().find('button');
    for ( var i=0; i<buttons.length; ++i ) {
        var jButton = $( buttons[i] );
        if ( jButton.text() == button_name ) {
              return jButton;
        }
    }
    return null;
} 

Więc jeśli utworzyłeś takie okno dialogowe:

$(function() {
    $("#myDialogBox").dialog({

      bgiframe: true, height: 'auto', width: 700, modal: true,
      buttons: {
        'Add to request list': function() {
                                     $(this).dialog('close');
                                     $('form').submit();
                               },
        'Cancel': function() {
                       $(this).dialog('close');
                  }
      }
});

Możesz uzyskać przyciski, wykonując następujące czynności:

var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn           = getDialogButton('myDialogBox','Cancel');

Wyłączyć:

addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');

Umożliwić:

addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');

Dla przypomnienia ten post pomógł mi rozwiązać problem. Krótko mówiąc, musisz ustawić atrybut disabled na disabled, a nie na false:

_send_button.attr('disabled','disabled');

Oto jak wygląda cały kod. Dodałem też kilka stylów, aby wyglądał na wyłączony:

var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);

Myślę, że to powinno działać ze wszystkimi,

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog').dialog('open');
        $(function(){
            $('#dialog').dialog({
                autoOpen: true,
                width: 400,
                modal: true,
                overlay: {
                    opacity: 0.8,
                    background: "black"
                },
                resizable: false,
                show: 'slow',
                buttons: {
                    //"OK":function() {
                    //    window.location="index.php?view=list";
                    //},
                    "Cancel": function() {
                        $(this).dialog("close");
                        $(this).attr("class", "button");
                    }
                }
            });

            var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
            dlgFirstButton.addClass('button');
        });
    });
</script>

Aby wyłączyć przycisk Zapisz w moim oknie dialogowym, użyj następującego wiersza w swojej funkcji.

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

Aby zmienić tekst w przycisku, użyj następującego wiersza (to zmienia tekst przycisku Anuluj na Zamknij mnie)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

@Chris Możesz użyć następujących wierszy kodu, aby włączyć / wyłączyć przyciski dialogowe, dopóki nie zaznaczysz / nie zaznaczysz pola wyboru

<div id="dialog-confirm" title="test">
    <label>Enable Confirm?<input type="checkbox" checked /></label>
</div>

    $("#dialog-confirm").dialog({
    resizable: false,
    height:240,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Confirm': function() {
            $(this).dialog('close');
        }
    }
});

    $("#dialog-confirm :checkbox").change(function() {
        $(".ui-dialog-buttonpane button:contains('Confirm')")
           .button(this.checked ? "enable" : "disable");
    });

Oryginalne źródło: http://jsfiddle.net/nick_craver/rxZPv/1/

Wywołanie .attr("disabled", true)oczywiście działa, ale używając jQuery chciałbyś to zrobić w bardziej „cukrowy” sposób, więc napisałem proste rozszerzenie:

(function( $ ) {
  $.fn.disable = function(isDisabled) {
    var val = isDisabled;
    if (isDisabled === undefined)
        val = true;
    this.attr("disabled", val);
  };
  $.fn.enable = function(isEnabled) {
    var val = !isEnabled;
    if (isEnabled === undefined)
        val = false;
    this.attr("disabled", val); 
  }
})( jQuery );

Teraz masz funkcje enable()i disable()możesz wykonywać swoją pracę w ten sposób:

$('#continueButton').disable();

Który jest taki sam jak

$('#continueButton').disable(true);

i

$('#continueButton').enable(false);

To zrobiło dla mnie zadanie:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

W świecie jQuery, jeśli chcesz wybrać obiekt z zestawu elementów DOM, powinieneś użyć eq () .

Przykłady:

przycisk var = $ („przycisk”). eq (1);

lub

przycisk var = $ („button: eq (1)”);

Zgodnie z dokumentacją :

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

Aby móc po prostu wybrać przycisk, możesz dodać własną klasę CSS do przycisku, który powinien być włączony / wyłączony.

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

Następnie włączenie / wyłączenie wyglądałoby następująco:

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);

Jeśli ktoś chce zastąpić przycisk animacją ładowania po kliknięciu (na przykład, gdy przycisk „Prześlij” przesyła formularz w oknie dialogowym) - możesz zastąpić przycisk obrazem w następujący sposób:

...
buttons: {
    "Submit": function(evt) {
        $(evt.target).closest('button').replaceWith('<img src="loading.gif">');
    }
}

jQuery replaceWith docs

Aby wyłączyć jeden przycisk, w oknie dialogowym otwórz:

$("#InspectionExistingFacility").dialog({
    autoOpen: false, modal: true, width: 700, height: 550,
    open: function (event, ui) {
        $("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
    },
    show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
    buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});