Làm cách nào để vô hiệu hóa một nút trên hộp thoại jQuery UI?

Làm cách nào để vô hiệu hóa một nút trên hộp thoại UI UI . Tôi dường như không thể tìm thấy điều này trong bất kỳ tài liệu nào trong liên kết ở trên.

Tôi có 2 nút trên xác nhận phương thức ("Xác nhận" và "Hủy"). Trong một số trường hợp nhất định, tôi muốn tắt nút "Xác nhận".

Nếu bạn bao gồm .button()plugin / widget mà jQuery UI chứa (nếu bạn có thư viện đầy đủ và trên 1.8+, bạn có nó), bạn có thể sử dụng nó để tắt nút và cập nhật trạng thái trực quan, như thế này:

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

Bạn có thể dùng thử tại đây ... hoặc nếu bạn đang sử dụng phiên bản cũ hơn hoặc không sử dụng tiện ích nút, bạn có thể tắt nó như thế này:

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

Nếu bạn muốn nó trong một hộp thoại cụ thể, hãy nói bằng ID, sau đó làm điều này:

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

Trong các trường hợp khác :contains()có thể cho kết quả dương tính giả thì bạn có thể sử dụng .filter()như thế này, nhưng nó quá mức ở đây vì bạn biết hai nút của mình. Nếu đó là trường hợp trong các tình huống khác, nó sẽ trông như thế này:

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

Điều này sẽ ngăn không :contains()khớp với một chuỗi con của thứ khác.

Có vẻ như bất cứ ai, ngay cả trong câu hỏi được liên kết này , đã đề xuất giải pháp này, tương tự như phần đầu tiên của câu trả lời được đưa ra bởi 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");
            }
        }
    ]
});

Sau đó, ở nơi khác, bạn sẽ có thể sử dụng API cho nút UI jquery:

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

Bạn cũng có thể sử dụng không tại tài liệu disabledthuộc tính:

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

    }]
});

Để bật sau khi hộp thoại đã mở, sử dụng:

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

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

Các hoạt động sau đây từ bên trong các nút bấm chức năng:

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

Một nút được xác định bởi lớp ui-button. Để tắt một nút:

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

Trừ khi bạn đang tự động tạo hộp thoại (có thể), bạn sẽ biết vị trí của nút. Vì vậy, để tắt nút đầu tiên:

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

Các ui-state-disabledlớp học là những gì cung cấp cho một nút mà phong cách mờ đẹp.

Tôi đã tạo một hàm jQuery để thực hiện công việc này dễ dàng hơn một chút. Có lẽ bây giờ có một giải pháp tốt hơn ... dù sao đi nữa, đây là 2 phần của tôi. :)

Chỉ cần thêm nó vào tệp JS của bạn:

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

Vô hiệu hóa nút 'Ok' trên hộp thoại với lớp 'hộp thoại':

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

Kích hoạt tất cả các nút:

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

Bật nút 'Đóng' và thay đổi màu:

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

Văn bản trên tất cả các nút màu đỏ:

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

Hi vọng điêu nay co ich :)

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

Bạn có thể ghi đè mảng nút và chỉ còn lại những cái bạn cần.

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

mã này vô hiệu hóa nút với 'YOU_BUTTON_LABEL'. bạn có thể thay thế tên trong chứa (). để vô hiệu hóa

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

thay thế 'YOU_BUTTON_LABEL' bằng nhãn của nút của bạn. để kích hoạt

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

Bạn có thể làm điều này để vô hiệu hóa nút đầu tiên chẳng hạn:

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

Cách tôi làm là Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Đây là cách ngắn nhất và dễ nhất mà tôi tìm thấy.

Nếu bạn đang sử dụng loại trực tiếp, thì điều này thậm chí còn sạch hơn. Hãy tưởng tượng bạn có những điều sau đây:

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>

Phép thuật đến từ nguồn UI UI :

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

Về cơ bản, bạn có thể gọi bất kỳ hàm đối tượng jQuery nào bằng cách chuyển nó qua đối tượng nút.

Ví dụ: nếu bạn muốn sử dụng HTML:

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

Hoặc, nếu bạn muốn thêm một lớp vào nút (bạn có thể thực hiện nhiều cách này):

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

Có thể bạn là người dở hơi và bạn muốn loại bỏ nút khỏi dom khi nó lơ lửng:

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

Tôi thực sự ngạc nhiên khi dường như không ai nhắc đến điều này trong vô số chủ đề như thế này ...

Điều này làm việc cho tôi -

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

Bạn có thể tắt một nút khi bạn xây dựng hộp thoại:

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

Hoặc bạn có thể tắt nó bất cứ lúc nào sau khi hộp thoại được tạo:

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