Bir jQuery UI iletişim kutusundaki bir düğmeyi nasıl devre dışı bırakabilirim?

JQuery Kullanıcı Arabirimi iletişim kutusundaki bir düğmeyi devre dışı bırakmaya nasıl gidebilirim ? Bunu yukarıdaki bağlantıdaki belgelerin hiçbirinde bulamıyorum.

Modsal onayda 2 düğme var ("Onayla" ve "İptal"). Bazı durumlarda, "Onayla" düğmesini devre dışı bırakmak istiyorum.

Eğer dahil ediyorsanız .button()eklenti / Widget jQuery UI (tam kütüphane var ve 1.8+ üzerinde ise, onu sahipse), düğmesini devre dışı için kullanabilirsiniz içerdiğini ve bu gibi görsel durumunu güncelleyin:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

Buradan deneyebilirsiniz ... veya daha eski bir sürümdeyseniz veya düğme widget'ını kullanmıyorsanız, şu şekilde devre dışı bırakabilirsiniz:

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

Belirli bir iletişim kutusunda olmasını istiyorsanız, kimliğe göre söyleyin, ardından bunu yapın:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

:contains()Yanlış pozitifler verebilecek diğer durumlarda .filter(), bu şekilde kullanabilirsiniz , ancak iki düğmenizi bildiğiniz için burada aşırı yüklüdür. Eğer bu diğer durumda söz konusudur, bu benzeyecektin:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

Bu, :contains()başka bir şeyin alt dizesini eşleştirmeyi engelleyecektir .

Görünüşe göre, bu bağlantılı soruda bile, Nick Craver tarafından verilen cevabın ilk kısmına benzer şekilde bu çözümü önerdi:

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

Ardından, başka bir yerde, jquery UI düğmesi için API'yi kullanabilmeniz gerekir :

$("#button-ok").button("disable");

Ayrıca kullanabilirsiniz değil artık belgelenmiş disabledniteliğini:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

İletişim kutusu açıldıktan sonra etkinleştirmek için şunu kullanın:

$("#my-button-1").attr('disabled', false);

JsFiddle: http://jsfiddle.net/xvt96e1p/4/

Düğmeler tıklama işlevi içinden aşağıdakiler çalışır:

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}

Sınıf tarafından bir düğme tanımlanır ui-button. Bir düğmeyi devre dışı bırakmak için:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

(Mümkün olan) iletişim kutusunu dinamik olarak oluşturmadığınız sürece düğmenin konumunu bileceksiniz. İlk düğmeyi devre dışı bırakmak için:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

ui-state-disabledSınıf güzel stili soluk bir düğmeye veren şeydir.

Bu görevi biraz daha kolaylaştırmak için bir jQuery işlevi oluşturdum. Muhtemelen şimdi daha iyi bir çözüm var ... her iki durumda da işte benim 2 sentim. :)

Bunu JS dosyanıza eklemeniz yeterlidir:

$.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;}
});};

'Dialog' sınıfı iletişim kutusundaki 'Tamam' düğmesini devre dışı bırak:

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

Tüm düğmeleri etkinleştir:

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

'Kapat' düğmesini etkinleştirin ve rengi değiştirin:

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

Tüm düğmelerdeki metin kırmızı:

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

Bu yardımcı olur umarım :)

function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}

Buttons dizisinin üzerine yazabilir ve yalnızca ihtiyacınız olanları bırakabilirsiniz.

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

bu kod 'YOUR_BUTTON_LABEL' düğmesiyle düğmeyi devre dışı bırakır. include () içindeki adı değiştirebilirsiniz. devre dışı bırakmak

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");

'YOUR_BUTTON_LABEL' ifadesini düğmenizin etiketi ile değiştirin. etkinleştirmek

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

İlk düğmeyi devre dışı bırakmak için bunu yapabilirsiniz, örneğin:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

Bunu yapma şeklim Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Bu bulduğum en kısa ve en kolay yol.

Nakavt kullanıyorsanız, bu daha da temiz. Aşağıdakilere sahip olduğunuzu düşünün:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

Sihir jQuery UI kaynağından geliyor :

$( "<button></button>", props )

Temel olarak herhangi bir jQuery örnek işlevini, düğme nesnesinden geçirerek çağırabilirsiniz.

Örneğin, HTML kullanmak istiyorsanız:

{ html: '<span class="fa fa-user"></span>User' }

Veya düğmeye bir sınıf eklemek istiyorsanız (bunu birden çok yolla yapabilirsiniz):

{ addClass: 'my-custom-button-class' }

Belki delirmişsinizdir ve üzerine geldiğinde düğmeyi dom'dan kaldırmak istersiniz:

{ mouseover: function () { $(this).remove(); } }

Kimsenin böyle sayısız iş parçacığından bahsetmediğine gerçekten şaşırdım ...

Bu benim için çalıştı -

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 

İletişim kutusunu oluştururken bir düğmeyi devre dışı bırakabilirsiniz:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

Veya iletişim kutusu oluşturulduktan sonra istediğiniz zaman devre dışı bırakabilirsiniz:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>