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

Kullanıcının belirli bilgileri girmesini gerektiren bir jQuery iletişim kutusu var. Bu formda, "devam et" düğmem var. Bu "devam" düğmesinin yalnızca tüm alanların içinde içerik olduğunda etkinleştirilmesini istiyorum, aksi takdirde devre dışı kalacaktır.

Alan durumu her değiştiğinde çağrılan bir fonksiyon yazdım. Ancak, iletişim kutusunun bu işlevden nasıl etkinleştirileceğini ve devre dışı bırakılacağını bilmiyorum. Ne yapmalıyım?

Hata! Bu düğmelerin şu şekilde oluşturulduğunu belirtmeyi unuttuk:

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

Devre dışı bırakılan özelliği ayarlamak istersiniz

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

Güncelleme : Ahha, şimdi karmaşıklığı görüyorum. JQuery Diyalog "düğmeleri" bölümünde yararlı olacaktır tek bir satır (vardı.

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

Düğmeler koleksiyonunu iletişim kutusundan almanız, hangisine ihtiyacınız olduğunu bulmak için döngüden geçmeniz ve ardından devre dışı bırakılmış özniteliği yukarıda gösterdiğim gibi ayarlamanız gerekir.

Çok basit:

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

Hepiniz basit bir görevi karmaşık hale getiriyorsunuz; jQueryUI iletişim kutusunun bir nedenden dolayı düğmeleri ayarlamak için iki yolu vardır.

Her düğme için yalnızca tıklama işleyicisini ayarlamanız gerekiyorsa, Objectbağımsız değişken alan seçeneği kullanın . Düğmeleri devre dışı bırakmak ve diğer nitelikleri sağlamak için Arraybağımsız değişken alan seçeneği kullanın .

Aşağıdaki örnek bir düğmeyi devre dışı bırakacak ve tüm jQueryUI CSS sınıflarını ve niteliklerini uygulayarak durumunu doğru şekilde güncelleyecektir.

Adım 1 - Bir Arraydüğmeyle iletişim kutunuzu oluşturun :

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

Adım 2 - İletişim kutusu oluşturulduktan sonra Bitti düğmesini etkinleştirin / devre dışı bırakın:

// 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);

Düğmeler için kimlikler sağlayan bir iletişim kutusu oluşturursanız,

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

düğmeyi aşağıdaki kodla devre dışı bırakabiliriz:

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

Düğmeyi ada göre bulmak istedim (çünkü jQuery UI iletişim kutusunda birkaç düğme var). Ayrıca belirli bir iletişim kutusunun düğmelerini almak için bir yol gerekir sayfada birkaç iletişim kutuları var. İşte benim işlevi:

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' );
}

Bu bir düğmeyi devre dışı bırakır:

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

Bir sayfada birkaç iletişim kutusu varsa iletişim kutusu kimliğini eklemeniz gerekir.

Düğmeyi tıkladıktan sonra devre dışı bırakmak için değiştirilen sorudan örnek:

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

Ayrıca, aşağıdaki soru da bu konuda yardımcı olacaktır: jQuery UI iletişim kutusundaki bir düğmeyi nasıl devre dışı bırakabilirim?

Bir iletişim düğmesinde devre dışı bırakmanın (veya başka bir işlemi gerçekleştirmenin) kolay bir yolunu buldum.

    var dialog_selector = "#myDialogId";

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

Sadece iletişim kutunuzun üst öğesini seçip tüm düğmeleri bulursunuz. Daha sonra düğmenizin Metnini kontrol ederek düğmelerinizi tanımlayabilirsiniz.

Bu .dialog("widget")iletişim DIV kendisini döndüren yöntem ile çalışma var . İletişim yöntemlerinde iseniz:

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

Kullanılabilirlik perspektifinden bakıldığında, düğmeyi etkin bırakmak, ancak biri eksik bir form göndermeye çalışırsa bir hata mesajı göstermek genellikle daha iyidir. Tıklamak istediğim düğme devre dışı bırakıldığında beni delirtiyor ve neden olduğuna dair bir ipucu yok.

Bunu dene:

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

İşte bir jQuery iletişim kutusu için enableOk işlevi:

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');
    }
}

"İlk" düğmesi en sağdaki düğmedir. Doğru görsel efekt için düğmeyi devre dışı bırakır ve iletişim kutusunun devre dışı sınıfını ayarlarsınız.

Eski jQuery kullanıcı arayüzünde (sürüm 1.7.3)

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

DOM öğesinin üzerindeki düğmeyi devre dışı bırakmak için. Artık bu yöntem artık Firefox'ta çalışmayan yeni jQuery kullanıcı arayüzüne (sürüm 1.8.7) yükseltme yaptığımıza rağmen, jquery UI düğmesine özel olarak jquery nesnelerinde işlevleri devre dışı bırakma ve işlevleri çağırabilirim:

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

haha, bottonlara erişmek için ilginç bir yöntem buldum

$("#dialog").dialog({

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

      }
 });

Görünüşe göre hepiniz argümanlarda bir olay nesnesi olduğunu bilmiyorsunuz ...

Bu arada, sadece geri arama içinden düğmeye erişir, genel durumlarda erişim için bir kimlik eklemek iyidir

Bir düğmeyi gerçekten devre dışı bırakmak istiyorsanız, üzerindeki .unbind () yöntemini de çağırmanız gerektiğini buldum. Aksi takdirde düğme hala etkin olabilir ve çift tıklatma birden çok form gönderilmesine neden olabilir. Aşağıdaki kod benim için çalışıyor:

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

Benzer bir şey yapmaya çalışan insanlar için geçerli bir çözüm buldum. Düğmeyi devre dışı bırakmak yerine basit birif , onay kutusunun işaretli olup olmadığını kontrol etmek için fonksiyona ifade .

Değilse, gönderilmeden önce kutunun işaretlenmesi gerektiğini belirten basit bir mesaj görüntüledi.

Örneğin:

$("#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");
            }
        }
    }
});

Neyse, umarım bu birisine yardım eder.

Bu görevi biraz daha kolaylaştırmak için bir jQuery işlevi oluşturdum. Bunu JavaScript 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 'OK' 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');

Umarım bu yardımcı olur.

Maalesef, burada verilen hiçbir çözüm sayfada birkaç diyalog için işe yaramadı.

Ayrıca sorun, orijinal iletişim kutusunun kendi içinde düğme bölmesi içermemesi, ancak bunun bir kardeşi olmasıdır.

Bu yüzden böyle bir iletişim kimliğiyle seçerek geldi:

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

...

ve sonra aynı getFirstDialogButton () işlevi daha sonra düğmeyi etkinleştirmek için kullanılabilir, örneğin başarılı doğrulamadan sonra.

Umarım birine yardımcı olabilir.

Düğmeleri atama için Array yöntemini kullanarak uyguladığım bir örnek, daha sonra kimlik seçicilerini daha sonra kullanmamı sağlıyor - tıpkı kabul edilen cevabın orijinal olarak belirtildiği gibi - düğmeleri etkinleştirmek / devre dışı bırakmak ve hatta tamamen olduğum gibi göstermek / gizlemek için yapıyor.

$( "#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" );
}
});

Başarılı bir şekilde gönderdikten sonra, iki düğmeyi devre dışı bırakıp gizliyorum ve varsayılan olarak devre dışı bırakılan Tamam düğmesini etkinleştiriyorum.

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

Bu yardımcı olur umarım.

Nick'in yaptıklarına benzer bir işlev oluşturdum, ancak yöntemim dialogClass'ı ayarlamayı gerektirmeyecek ve belirli bir iletişim kutusunun düğmelerini id yoluyla alabileceksiniz (uygulamanızda birden fazla varsa)

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;
} 

Diyaloğu şu şekilde oluşturduysanız:

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

Düğmeleri aşağıdakileri yaparak alabilirsiniz:

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

Devre dışı bırakmak için:

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

Etkinleştirmek:

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

Sadece kayıt için, bu yazı sorunumu çözmeme yardımcı oldu. Kısacası, devre dışı niteliğini false olarak değil devre dışı olarak ayarlamanız gerekir:

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

Tüm kod böyle görünüyor, ben de devre dışı görünmesini sağlamak için bazı stilleri ekledi:

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);

Bence herkesle çalışmalı,

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

İletişim kutusundaki Kaydet düğmesini devre dışı bırakmak için işlevinizde aşağıdaki satırı kullanın.

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

Bir düğmedeki metni değiştirmek için aşağıdaki satırı kullanın (bu, iptal düğmesi metnini Beni Kapat olarak değiştirir)

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

@Chris Onay kutusu onayla / işaretini kaldırılana kadar iletişim kutusu düğmelerini etkinleştirmek / devre dışı bırakmak için aşağıdaki kod satırlarını kullanabilirsiniz

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

Orijinal kaynak: http://jsfiddle.net/nick_craver/rxZPv/1/

.attr("disabled", true)Tabii ki çağırmak işe yarıyor, ama jQuery kullanarak bunu daha 'şeker' şekilde yapmak istiyorsunuz, bu yüzden basit bir uzantı yazdım:

(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 );

Artık işlevleriniz var enable()ve disable()işinizi şu şekilde yapabilirsiniz:

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

Hangi ile aynı

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

ve

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

Bu benim için işi yaptı:

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

JQuery dünyasında, bir DOM öğeleri kümesinden bir nesne seçmek istiyorsanız, eq () kullanmanız gerekir .

Örnekler:

var düğmesi = $ ('düğme'). eq (1);

veya

var düğmesi = $ ('düğmesi: eq (1)');

Belgelere göre :

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

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

Sadece düğmeyi seçebilmek için düğmeye etkinleştirilmesi / devre dışı bırakılması gereken kendi CSS sınıfını ekleyebilirsiniz.

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

Sonra etkinleştirme / devre dışı bırakma şöyle görünecektir:

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

Herhangi biri, bir düğmeyi tıklandığında yükleme animasyonu gibi bir şeyle değiştirmek istiyorsa (örneğin, "Gönder" düğmesi iletişim kutusundaki formu gönderdiğinde) - düğmeyi resminizle şu şekilde değiştirebilirsiniz:

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

jQuery replaceDokümanlar ile

Bir düğmeyi devre dışı bırakmak için, iletişim kutusu açıldığında:

$("#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"); } }
});