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

237

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');
      }
    }
  })
});
Draco
sumber
Ada jawaban yang bagus di: stackoverflow.com/questions/3646408/…
Amir
3
Saya meneliti ini sedikit dan menemukan bahwa solusi terbersih sejauh ini dijelaskan dalam tautan berikut: stackoverflow.com/a/4279852

Jawaban:

260

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.

Tom Ritter
sumber
Sayangnya dialog JQuery tidak membuatnya terlalu mudah untuk dilakukan, jadi Anda harus sedikit mengerjakannya.
Tom Ritter
Ya, tetapi opsi tombol tidak mengembalikan elemen DOM tetapi berfungsi - iterasi melalui itu baik-baik saja, tetapi menonaktifkannya tidak begitu mudah. Apakah saya melewatkan sesuatu di sini?
Remi Despres-Smyth
1
Anda perlu mengatasi metode ini untuk menonaktifkan tombol. Gunakan jQuery-foo untuk mendapatkan elemen dom yang dihasilkan dari halaman.
Stefan Kendall
36
Setuju - jadi mengapa ini jawaban yang dipilih? -1 untuk tidak lengkap.
Remi Despres-Smyth
22
Saya percaya .prop('disabled', true)lebih disukai di jQuery 1.6+
Molomby
191

Ini sangat sederhana:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
Raman
sumber
4
Saya suka solusi ini, tetapi harus benar-benar berbunyi: $ (": tombol: berisi ('Otentikasi')"). Attr ("dinonaktifkan", "dinonaktifkan"). AddClass ('ui-state-disabled'); (addClass tidak ada)
Eric Asberry
4
Jika ada beberapa dialog Anda harus mendefinisikan dialog apa yang perlu Anda ubah: $ ("# dialogId"). Parent (). $ (": Button: berisi ('Otentikasi')"). Attr ("dinonaktifkan", " dinonaktifkan "). addClass ('ui-state-disabled');
podeig
5
+1: Ini adalah jawaban terbaik sejauh ini ... Jawaban yang diterima tidak menjawab apa pun, hanya menyarankan pendekatan imperatif - yang rumit btw: kita tidak perlu mengulang apa pun, jquery dapat melakukan itu untuk kita.
rsenna
1
Saya menemukan ini berfungsi juga karena tombol-tombol dalam Dialog jQueryUI adalah tombol jQueryUI: $ ("# dialogID"). Parent (). Find (": tombol: berisi ('Otentikasi')"). Tombol ("nonaktifkan") ;
wrote_3
12
Saya percaya .prop('disabled', true)lebih disukai di jQuery 1.6+
Molomby
38

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);
Ido Sela
sumber
2
Ide yang tepat, tetapi eachloop tidak perlu. Tentukan classatribut dalam buttonsarray dan Anda dapat menggunakannya untuk menemukan elemen yang tepat.
cdmckay
seperti kata cdmackay, Anda tidak perlu mengulang. Dalam contoh Anda di atas, Anda bisa langsung saja menggunakan pemilih jQuery: var $ doneButton = $ ("# done");
Rob
Ketika saya mencoba membuat tombol menggunakan metode di atas (cara array), tombol ditampilkan sebagai '1' dan '0' dan bukan sebagai 'Selesai' dan 'Batal'. Mengapa ini terjadi? Teks tidak ditampilkan di tombol dan fungsi klik tidak diaktifkan.
Harke
1
Ini berfungsi untuk saya dan Anda tidak perlu loop. Atur id lalu akses elemen: this.myDialog.dialog ("option", "buttons", [{id: "addAdapterFormOkButton", teks: "OK", klik: function () {}}]) Maka Anda hanya perlu untuk mengaksesnya dengan pemilih seperti yang mereka semua katakan di atas: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ('ui-state-disabled'); okButt.attr ('dinonaktifkan', benar);
Gurnard
32

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);
vitalnik
sumber
7
saya telah memberi Anda +1 tetapi saya pikir lebih baik menggunakan metode daripada properti tombol seperti: $ ("# dialogSave"). tombol ("disable");
Fareed Alnamrouti
1
Ha! Paling mudah sejauh ini! Tetapi gunakan metode seperti yang dikatakan tarifed.
PapillonUK
29

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' );
}
Nick
sumber
Solusi bagus Namun saya akan menyebutkan dalam solusi, bahwa panel tombol bukan anak dari dialog - kuncinya adalah mengatur dialogClass unik, dan menggunakannya untuk pemilih. Ini membuat saya ketika saya melihatnya.
Remi Despres-Smyth
Menarik bahwa teks tombol diatur oleh kunci dari objek tombol. Tampaknya terbatas ketika Anda tidak perlu mengatur atribut. Kalau tidak, versi array lebih baik, di mana teks diatur secara eksplisit per tombol.
Gerard ONeill
19

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.

Rainer Blessing
sumber
11

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?

Chris Pietschmann
sumber
9

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.

Hugh Turner
sumber
9

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);
Guillaume Aversa
sumber
8

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.

erikkallen
sumber
6

Coba ini:

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

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.

Remi Despres-Smyth
sumber
Catatan, ini mengasumsikan Anda hanya punya satu dialog di halaman. Saya telah menulis fungsi untuk mengambil tombol apa pun dengan nama dari dialog apa pun pada halaman untuk menangani ini.
Remi Despres-Smyth
5

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');
Matt Palmerlee
sumber
5

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

haohaolee
sumber
1
Saya tidak berpikir ini akan berhasil. Ini hanya akan menonaktifkan tombol ketika tombol Ok bi diklik.
Jean-François Beauchamp
Saya perlu menonaktifkan tombol OK pada dialog sampai pemrosesan selesai. Ini bekerja dengan sempurna.
CodingYoshi
4

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');
postrasional
sumber
4

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.

Peter Mortensen
sumber
4

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.

sergiodlopes
sumber
3

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.

Timur Evdokimov
sumber
3

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.

Jeremiah Ware
sumber
3

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');
Shao
sumber
3

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);
Peter Mortensen
sumber
3

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>
Peter Mortensen
sumber
2

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");
Chanaka
sumber
1

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

Chanaka
sumber
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);
Pelaut Danubia
sumber
1

Ini berhasil bagi saya:

$find("<%= btnPrint.ClientID %>").set_enabled(true);
pembuat kode
sumber
1

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

diewland
sumber
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);
PaN1C_Showt1Me
sumber
0

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

Robbie Averill
sumber
0

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