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

Tôi có một hộp thoại jQuery yêu cầu người dùng nhập một số thông tin nhất định. Ở dạng này, tôi có nút "tiếp tục". Tôi muốn nút "tiếp tục" này chỉ được bật khi tất cả các trường có nội dung trong đó, nếu không nó sẽ bị vô hiệu hóa.

Tôi đã viết một hàm được gọi mỗi khi trạng thái trường thay đổi. Tuy nhiên, tôi không biết cách bật và tắt nút hộp thoại khỏi chức năng này. Tôi nên làm gì?

Rất tiếc và tôi quên đề cập rằng các nút này đã được tạo như sau:

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

Bạn sẽ muốn đặt thuộc tính bị vô hiệu hóa

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

Cập nhật : Ahha, tôi thấy sự phức tạp bây giờ. Các jQuery Dialog có một dòng duy nhất mà sẽ được sử dụng (theo "nút" phần.

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

Bạn sẽ cần lấy bộ sưu tập các nút từ hộp thoại, lặp qua đó để tìm cái nào bạn cần, sau đó đặt thuộc tính bị vô hiệu hóa như tôi đã trình bày ở trên.

Nó rất đơn giản:

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

Bạn đang phức tạp hóa một nhiệm vụ đơn giản; hộp thoại jQueryUI có hai cách để đặt nút vì một lý do.

Nếu bạn chỉ cần đặt trình xử lý nhấp cho mỗi nút, hãy sử dụng tùy chọn có Objectđối số. Để vô hiệu hóa các nút và cung cấp các thuộc tính khác, hãy sử dụng tùy chọn có một Arrayđối số.

Ví dụ sau sẽ vô hiệu hóa một nút và cập nhật chính xác trạng thái của nó bằng cách áp dụng tất cả các lớp và thuộc tính CSS jQueryUI.

Bước 1 - Tạo hộp thoại của bạn với một Arraynút:

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

Bước 2 - Bật / tắt nút Xong sau khi hộp thoại được tạo:

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

Nếu bạn tạo một hộp thoại cung cấp id cho các nút,

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

chúng ta có thể vô hiệu hóa nút với đoạn mã sau:

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

Tôi muốn có thể tìm thấy nút theo tên (vì tôi có một số nút trong hộp thoại UI UI của mình). Tôi cũng có một vài hộp thoại trên trang vì vậy tôi cần một cách để có được các nút của một hộp thoại cụ thể. Đây là chức năng của tôi:

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

Điều này vô hiệu hóa một nút:

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

Bạn phải thêm id hộp thoại nếu bạn có một vài hộp thoại trên một trang.

Đây là mẫu từ câu hỏi được sửa đổi để vô hiệu hóa nút sau khi nhấp:

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

Ngoài ra, câu hỏi sau đây cũng sẽ hữu ích với điều này: Làm cách nào tôi có thể tắt một nút trên hộp thoại UI UI?

Tôi tìm thấy một cách dễ dàng để vô hiệu hóa (hoặc thực hiện bất kỳ hành động nào khác) trên nút hộp thoại.

    var dialog_selector = "#myDialogId";

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

Bạn chỉ cần chọn cha mẹ của hộp thoại của bạn và tìm tất cả các nút. Sau đó kiểm tra Văn bản của nút của bạn, bạn có thể xác định các nút của mình.

Tôi đã làm việc này với phương thức .dialog("widget")trả về hộp thoại DIV. Nếu bạn đang ở trong các phương thức hộp thoại:

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

Từ góc độ khả năng sử dụng, tốt hơn hết là để nút bật nhưng hiển thị thông báo lỗi nếu ai đó cố gắng gửi một biểu mẫu không đầy đủ. Nó khiến tôi phát điên khi nút tôi muốn nhấp bị vô hiệu hóa và không biết tại sao.

Thử cái này:

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

Đây là hàm enableOk của tôi cho hộp thoại 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');
    }
}

Nút "đầu tiên" là nút xa nhất bên phải. Cả hai bạn đều tắt nút và đặt lớp bị vô hiệu hóa của hộp thoại, để có hiệu ứng hình ảnh phù hợp.

Trong giao diện người dùng jQuery kế thừa (phiên bản 1.7.3) tôi chỉ có thể sử dụng

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

để chỉ vô hiệu hóa nút trên chính phần tử DOM. Bây giờ chúng tôi đã nâng cấp lên Giao diện người dùng jQuery mới hơn (phiên bản 1.8.7), phương thức đó không còn hoạt động trong Firefox, nhưng tôi chỉ có thể gọi vô hiệu hóa cụ thể nút UI jquery và bật các chức năng trên các đối tượng jquery của nút:

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

haha, chỉ cần tìm thấy một phương pháp thú vị để truy cập các trang web

$("#dialog").dialog({

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

      }
 });

Dường như tất cả các bạn không biết có một đối tượng sự kiện trong các đối số ...

Nhân tiện, nó chỉ truy cập nút từ trong cuộc gọi lại, trong trường hợp chung, thật tốt khi thêm id để truy cập

Nếu bạn thực sự muốn tắt một nút, tôi thấy rằng bạn cũng cần gọi phương thức .unbind () trên đó. Nếu không, nút có thể vẫn hoạt động và nhấp đúp có thể dẫn đến nhiều lần gửi biểu mẫu. Đoạn mã sau hoạt động với tôi:

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

Tôi tìm thấy một cách giải quyết có thể áp dụng cho những người đang cố gắng làm điều gì đó tương tự. Thay vì vô hiệu hóa nút, tôi đặt một ifcâu lệnh đơn giản vào hàm để kiểm tra xem hộp kiểm đã được chọn chưa.

Nếu không, nó sẽ hiển thị một thông báo đơn giản cho biết hộp phải được kiểm tra trước khi gửi.

Ví dụ:

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

Dù sao, tôi hy vọng rằng sẽ giúp được ai đó.

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. Chỉ cần thêm nó vào tệp JavaScript 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');

Tôi hi vọng cái này giúp được.

Thật không may, không có giải pháp nào được đưa ra ở đây làm việc cho một số hộp thoại trên trang.

Ngoài ra, vấn đề là hộp thoại ban đầu không chứa khung nút, nhưng là anh chị em của nó.

Vì vậy, tôi đã đưa ra lựa chọn bằng ID hộp thoại như thế:

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

...

và sau đó, hàm getFirstDialogButton () tương tự có thể được sử dụng để bật nút, ví dụ: sau khi xác thực thành công.

Hy vọng nó có thể giúp được ai đó.

Đây là một ví dụ mà tôi vừa triển khai bằng phương pháp gán các nút gán cho Array, sau đó cho phép tôi sử dụng các bộ chọn id sau này - giống như câu trả lời được chấp nhận đã nêu ban đầu - để bật / tắt các nút và thậm chí hiển thị / ẩn chúng hoàn toàn như tôi đang làm.

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

Sau khi gửi thành công, tôi tắt và ẩn hai trong số các nút và bật nút OK đã bị tắt theo mặc định.

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

Hi vọng điêu nay co ich.

Tôi đã tạo một chức năng tương tự như những gì Nick đã làm, nhưng phương pháp của tôi sẽ không yêu cầu thiết lập hộp thoạiClass và bạn sẽ có thể nhận được các nút của một hộp thoại cụ thể thông qua id (nếu có nhiều hơn một ứng dụng trong ứng dụng của bạn)

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

Vì vậy, nếu bạn đã tạo hộp thoại như vậy:

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

Bạn có thể nhận được các nút bằng cách làm như sau:

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

Để tắt:

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

Để bật:

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

Chỉ cần cho hồ sơ, bài đăng này đã giúp tôi giải quyết vấn đề của tôi. Nói cách ngắn gọn, bạn phải đặt thuộc tính bị vô hiệu thành vô hiệu hóa, không thành false:

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

Đây là cách tất cả các mã trông, tôi cũng đã thêm một số kiểu để làm cho nó trông bị vô hiệu hóa:

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

Tôi nghĩ rằng nó nên làm việc với tất cả,

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

Để Tắt nút Lưu trong hộp thoại của tôi, hãy sử dụng dòng sau trong chức năng của bạn.

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

Để thay đổi văn bản trong một nút, hãy sử dụng dòng sau (điều này thay đổi văn bản nút hủy thành Đóng tôi)

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

@Chris Bạn có thể sử dụng các dòng mã sau để bật / tắt các nút hộp thoại cho đến khi hộp kiểm của bạn được chọn / bỏ chọn

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

Nguồn gốc: http://jsfiddle.net/nick_craver/rxZPv/1/

Gọi .attr("disabled", true)tất nhiên là có hiệu quả, nhưng sử dụng jQuery bạn muốn thực hiện theo cách 'đường' hơn, vì vậy tôi đã viết phần mở rộng đơn giản:

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

Bây giờ bạn có các chức năng enable()và disable(), vì vậy bạn có thể thực hiện công việc của mình theo cách đó:

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

Giống như

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

và

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

Điều này đã làm công việc cho tôi:

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

Trong thế giới jQuery, nếu bạn muốn chọn một đối tượng từ một tập hợp các phần tử DOM, bạn nên sử dụng eq () .

Ví dụ:

nút var = $ ('nút'). eq (1);

hoặc là

nút var = $ (nút ': eq (1)');

Theo tài liệu :

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

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

Để có thể chỉ cần chọn nút, bạn có thể thêm một lớp CSS riêng vào nút, cần được bật / tắt.

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

Sau đó, bật / tắt sẽ như thế này:

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

Nếu bất cứ ai đang tìm cách thay thế một nút bằng một cái gì đó như tải hình động khi nhấp vào (ví dụ: khi nút "Gửi" gửi biểu mẫu trong hộp thoại) - bạn có thể thay thế nút đó bằng hình ảnh của mình như sau:

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

jQuery thay thế với các tài liệu

Để tắt một nút, tại hộp thoại mở:

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