Bagaimana saya bisa menonaktifkan tombol pada dialog UI jQuery?

Bagaimana cara menonaktifkan tombol pada dialog UI jQuery . Sepertinya saya tidak dapat menemukan ini di salah satu dokumentasi di tautan di atas.

Saya memiliki 2 tombol pada konfirmasi modal ("Konfirmasi" dan "Batalkan"). Dalam kasus tertentu, saya ingin menonaktifkan tombol "Konfirmasi".

Jika Anda menyertakan .button()plugin / widget yang berisi jQuery UI (jika Anda memiliki perpustakaan lengkap dan 1,8+, Anda memilikinya), Anda dapat menggunakannya untuk menonaktifkan tombol dan memperbarui status secara visual, seperti ini:

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

Anda dapat mencobanya di sini ... atau jika Anda menggunakan versi yang lebih lama atau tidak menggunakan widget tombol, Anda dapat menonaktifkannya seperti ini:

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

Jika Anda menginginkannya di dalam dialog tertentu, ucapkan dengan ID, lalu lakukan ini:

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

Dalam kasus lain di mana :contains()mungkin memberikan positif palsu maka Anda dapat menggunakan .filter()seperti ini, tapi ini berlebihan karena Anda tahu dua tombol Anda. Jika itu terjadi dalam situasi lain, akan terlihat seperti ini:

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

Ini akan mencegah :contains()dari mencocokkan substring dari sesuatu yang lain.

Sepertinya siapa pun, bahkan dalam pertanyaan terkait ini , telah mengusulkan solusi ini, mirip dengan bagian pertama dari jawaban yang diberikan oleh Nick Craver:

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

Kemudian, di tempat lain, Anda harus dapat menggunakan API untuk tombol UI jquery:

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

Anda juga dapat menggunakan atribut yang tidak didokumentasikan sekarang disabled:

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

    }]
});

Untuk mengaktifkan setelah dialog dibuka, gunakan:

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

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

Berikut ini berfungsi dari dalam fungsi klik tombol:

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

Sebuah tombol diidentifikasi oleh kelas ui-button. Untuk menonaktifkan tombol:

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

Kecuali jika Anda secara dinamis membuat dialog (yang mungkin), Anda akan tahu posisi tombol. Jadi, untuk menonaktifkan tombol pertama:

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

The ui-state-disabledkelas adalah apa yang memberi sebuah tombol yang bagus gaya redup.

Saya membuat fungsi jQuery untuk membuat tugas ini sedikit lebih mudah. Mungkin sekarang ada solusi yang lebih baik ... bagaimanapun juga, ini 2 sen saya. :)

Cukup tambahkan ini ke file JS 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');

Teks pada semua tombol berwarna merah:

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

Semoga ini membantu :)

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

Anda dapat menimpa susunan tombol dan hanya menyisakan yang Anda butuhkan.

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

kode ini nonaktifkan tombol dengan 'YOUR_BUTTON_LABEL'. Anda dapat mengganti nama di berisi (). untuk menonaktifkan

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

ganti 'YOUR_BUTTON_LABEL' dengan label tombol Anda. untuk mengaktifkan

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

Anda dapat melakukan ini untuk menonaktifkan tombol pertama misalnya:

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

Cara saya melakukannya adalah Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Ini adalah cara terpendek dan termudah yang saya temukan.

Jika Anda menggunakan sistem gugur, maka ini lebih bersih. Bayangkan Anda memiliki yang berikut ini:

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>

Keajaiban ini berasal dari sumber jQuery UI :

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

Anda pada dasarnya dapat memanggil fungsi instance APAPUN jQuery dengan melewatkannya melalui objek tombol.

Misalnya, jika Anda ingin menggunakan HTML:

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

Atau, jika Anda ingin menambahkan kelas ke tombol (Anda dapat melakukan ini beberapa cara):

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

Mungkin Anda gila, dan Anda ingin menghapus tombol dari dom ketika itu melayang:

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

Saya benar-benar terkejut bahwa tidak ada seorang pun yang menyebutkan hal ini dalam banyak utas seperti ini ...

Ini bekerja untuk saya -

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

Anda dapat menonaktifkan tombol saat membuat dialog:

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

Atau Anda dapat menonaktifkannya kapan saja setelah dialog dibuat:

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