Bagaimana saya bisa menonaktifkan tombol dalam dialog jQuery dari suatu fungsi?

Saya memiliki dialog jQuery yang mengharuskan pengguna memasukkan informasi tertentu. Dalam formulir ini, saya memiliki tombol "lanjutkan". Saya ingin tombol "terus" ini hanya diaktifkan setelah semua bidang isinya, jika tidak maka akan tetap dinonaktifkan.

Saya menulis fungsi yang disebut setiap kali status bidang telah berubah. Namun, saya tidak tahu cara mengaktifkan dan menonaktifkan tombol dialog dari fungsi ini. Apa yang harus saya lakukan?

Ups dan saya lupa menyebutkan bahwa tombol-tombol ini dibuat sebagai berikut:

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

Anda ingin mengatur properti yang dinonaktifkan

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

Update : Ahha, saya melihat kerumitannya sekarang. The jQuery Dialog memiliki garis tunggal yang akan digunakan (di bawah "tombol" bagian.

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

Anda harus mendapatkan koleksi tombol dari dialog, mengulanginya untuk menemukan yang mana yang Anda butuhkan, dan kemudian mengatur atribut yang dinonaktifkan seperti yang saya tunjukkan di atas.

Ini sangat sederhana:

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

Anda semua menyulitkan tugas sederhana; dialog jQueryUI memiliki dua cara untuk mengatur tombol karena suatu alasan.

Jika Anda hanya perlu mengatur handler klik untuk setiap tombol, gunakan opsi yang mengambil Objectargumen. Untuk menonaktifkan tombol dan memberikan atribut lain, gunakan opsi yang mengambil Arrayargumen.

Contoh berikut akan menonaktifkan tombol, dan memperbarui statusnya dengan benar dengan menerapkan semua kelas dan atribut CSS jQueryUI.

Langkah 1 - Buat dialog Anda dengan Arraytombol:

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

Langkah 2 - Mengaktifkan / menonaktifkan tombol Selesai setelah dialog dibuat:

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

Jika Anda membuat dialog yang menyediakan id untuk tombol,

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

kita dapat menonaktifkan tombol dengan kode berikut:

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

Saya ingin dapat menemukan tombol dengan nama (karena saya memiliki beberapa tombol dalam dialog UI jQuery saya). Saya juga memiliki beberapa dialog pada halaman jadi saya perlu cara untuk mendapatkan tombol dari dialog tertentu. Inilah fungsi saya:

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

Ini menonaktifkan tombol:

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

Anda harus menambahkan id dialog jika Anda memiliki beberapa dialog pada halaman.

Inilah contoh dari pertanyaan yang dimodifikasi untuk menonaktifkan tombol setelah diklik:

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

Selain itu, pertanyaan berikut juga akan membantu dengan ini: Bagaimana saya bisa menonaktifkan tombol pada dialog jQuery UI?

Saya menemukan cara mudah untuk menonaktifkan (atau melakukan tindakan lain) pada tombol dialog.

    var dialog_selector = "#myDialogId";

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

Anda cukup memilih induk dari dialog Anda dan menemukan semua tombol. Kemudian memeriksa Teks tombol Anda, Anda dapat mengidentifikasi tombol Anda.

Saya mendapatkan ini berfungsi dengan metode .dialog("widget")yang mengembalikan DIV dialog itu sendiri. Jika Anda menggunakan metode dialog:

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

Dari perspektif kegunaan, biasanya lebih baik membiarkan tombol diaktifkan tetapi menunjukkan pesan kesalahan jika seseorang mencoba mengirim formulir yang tidak lengkap. Ini membuat saya gila ketika tombol yang ingin saya klik dinonaktifkan dan tidak ada petunjuk mengapa.

Coba ini:

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

Ini adalah fungsi enableOk saya untuk dialog 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');
    }
}

Tombol "pertama" adalah yang terjauh ke kanan. Anda berdua menonaktifkan tombol dan mengatur kelas dialog yang dinonaktifkan, untuk efek visual yang tepat.

Di legacy jQuery UI (versi 1.7.3) saya bisa menggunakan saja

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

untuk hanya menonaktifkan tombol pada elemen DOM itu sendiri. Sekarang kita telah meningkatkan ke jQuery UI yang lebih baru (versi 1.8.7) metode itu tidak lagi berfungsi di Firefox, tetapi saya cukup memanggil jquery UI tombol khusus untuk menonaktifkan dan mengaktifkan fungsi pada objek jquery tombol:

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

haha, baru saja menemukan metode yang menarik untuk mengakses bottons

$("#dialog").dialog({

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

      }
 });

Sepertinya Anda semua tidak tahu ada objek acara dalam argumen ...

omong-omong, itu hanya mengakses tombol dari dalam panggilan balik, dalam kasus umum, ada baiknya menambahkan id untuk akses

Jika Anda benar-benar ingin menonaktifkan tombol, saya menemukan bahwa Anda juga perlu memanggil metode .unbind () di atasnya. Kalau tidak, tombolnya mungkin masih aktif, dan klik dua kali dapat menyebabkan banyak pengiriman formulir. Kode berikut ini berfungsi untuk saya:

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

Saya menemukan solusi yang dapat diterapkan pada orang yang mencoba melakukan hal serupa. Alih-alih menonaktifkan tombol, saya menempatkan ifpernyataan sederhana di fungsi untuk memeriksa apakah kotak centang dicentang.

Jika tidak, itu akan menampilkan pesan sederhana yang mengatakan kotak itu harus diperiksa sebelum dikirim.

Sebagai contoh:

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

Bagaimanapun, saya harap itu membantu seseorang.

Saya membuat fungsi jQuery untuk membuat tugas ini sedikit lebih mudah. Cukup tambahkan ini ke file JavaScript Anda:

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

Nonaktifkan tombol 'OK' pada dialog dengan kelas 'dialog':

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

Aktifkan semua tombol:

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

Aktifkan tombol 'Tutup' dan ubah warna:

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

Saya harap ini membantu.

Sayangnya tidak ada solusi dari yang diberikan di sini yang berfungsi untuk beberapa dialog pada halaman.

Juga masalahnya adalah bahwa dialog asli tidak berisi panel tombol itu sendiri, tetapi merupakan saudara kandung dari itu.

Jadi saya datang dengan memilih dengan ID dialog seperti itu:

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

...

dan kemudian fungsi getFirstDialogButton () yang sama dapat digunakan kemudian untuk mengaktifkan tombol, misalnya setelah validasi berhasil.

Semoga bisa membantu seseorang.

Berikut ini adalah contoh yang baru saja saya terapkan menggunakan metode Array untuk menetapkan tombol, yang kemudian memungkinkan saya untuk menggunakan id selektor nanti - sama seperti jawaban yang diterima pada awalnya - untuk mengaktifkan / menonaktifkan tombol dan bahkan menampilkan / menyembunyikannya sepenuhnya seperti saya perbuatan.

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

Setelah berhasil mengirim, saya menonaktifkan dan menyembunyikan dua tombol dan mengaktifkan tombol OK yang dinonaktifkan secara default.

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

Semoga ini membantu.

Saya membuat fungsi yang mirip dengan apa yang dilakukan Nick, tetapi metode saya tidak memerlukan pengaturan dialogClass dan Anda akan bisa mendapatkan tombol dari dialog tertentu melalui id (jika lebih dari satu ada di aplikasi Anda)

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

Jadi jika Anda membuat dialog seperti itu:

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

Anda bisa mendapatkan tombol dengan melakukan hal berikut:

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

Untuk menonaktifkan:

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

Untuk mengaktifkan:

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

Sebagai catatan, postingan ini membantu saya untuk menyelesaikan masalah saya. Singkatnya, Anda harus mengatur atribut yang dinonaktifkan menjadi dinonaktifkan, bukan ke false:

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

Ini adalah bagaimana semua kode terlihat, saya juga menambahkan beberapa gaya agar terlihat dinonaktifkan:

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

Saya pikir itu harus bekerja dengan semua,

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

Untuk Menonaktifkan tombol Simpan di kotak Dialog saya gunakan baris berikut di fungsi Anda.

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

Untuk mengubah teks dalam tombol, gunakan baris berikut (ini mengubah teks tombol batal menjadi Tutup Saya)

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

@ Chris Anda dapat menggunakan baris kode berikut untuk mengaktifkan / menonaktifkan tombol dialog hingga kotak centang Anda dicentang / tidak dicentang

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

Sumber asli: http://jsfiddle.net/nick_craver/rxZPv/1/

Memanggil .attr("disabled", true)tentu saja berfungsi, tetapi menggunakan jQuery Anda ingin melakukannya dengan cara yang lebih 'gula', jadi saya telah menulis ekstensi sederhana:

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

Sekarang Anda memiliki fungsi enable()dan disable(), sehingga Anda dapat melakukan pekerjaan Anda seperti itu:

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

Yang sama dengan

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

dan

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

Ini berhasil bagi saya:

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

Di dunia jQuery, jika Anda ingin memilih objek dari sekumpulan elemen DOM, Anda harus menggunakan eq () .

Contoh:

tombol var = $ ('tombol'). eq (1);

atau

tombol var = $ ('tombol: eq (1)');

Menurut dokumentasi :

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

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

Untuk dapat dengan mudah memilih tombol, Anda dapat menambahkan kelas CSS sendiri ke tombol, yang harus diaktifkan / dinonaktifkan.

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

Maka mengaktifkan / menonaktifkan akan terlihat seperti ini:

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

Jika ada yang ingin mengganti tombol dengan sesuatu seperti animasi pemuatan ketika diklik (misalnya ketika tombol "Kirim" mengirimkan formulir dalam dialog) - Anda dapat mengganti tombol dengan gambar Anda seperti ini:

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

jQuery gantiDengan dokumen

Untuk menonaktifkan satu tombol, pada dialog buka:

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