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

Question

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. Trong biểu mẫu 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 kích hoạt khi tất cả các trường có nội dung trong đó, nếu không thì nó sẽ vẫn bị vô hiệu hóa.

Tôi đã viết một hàm được gọi là mọi 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 thoại từ chức năng này. Tôi nên làm gì?

Rất tiếc và tôi quên đề cập đến các nút này được tạo ra 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'); 
     } 
    } 
    }) 
}); 

Answer 1

Bạn sẽ muốn thiết lập các disabled property

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

Cập nhật: AHHA, tôi thấy sự phức tạp hiện nay . 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 phải nhận được bộ sưu tập các nút từ hộp thoại, vòng lặp thông qua đó để tìm cái nào bạn cần, và sau đó đặt thuộc tính bị tắt như tôi đã trình bày ở trên.

Answer 2

Tôi đã tìm thấy giải pháp thay thế có thể áp dụng cho những người đang cố gắng thực hiện điều gì đó tương tự. Thay vì tắt nút, tôi đặt câu lệnh if đơn giản.

Nếu không, nó hiển thị một thông báo đơn giản nói rằng hộp ha d đượ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 một ai đó.

Answer 3

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 thoại nếu bạn có một vài hộp thoại trên một trang.

Answer 4

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

Answer 5

Chỉ để lưu nội dung, bài đăng này đã giúp tôi giải quyết vấn đề của mình. Nói một cách ngắn gọn, bạn phải thiết lập các thuộc tính tàn tật để vô hiệu hóa, không phải là 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ố phong cách để làm cho nó trông tàn tật:

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

Answer 6

Đây là chức năng 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 vô hiệu hóa 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 thích hợp.

Answer 7

Tôi muốn có thể tìm thấy nút theo tên (vì tôi có nhiều nút trong hộp thoại Giao diện người dùng jQuery). Tôi cũng có một số 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'); 
} 

Answer 8

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

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

Answer 9

Nếu bạn thực sự muốn vô hiệu hóa một nút, tôi thấy rằng bạn cũng cần phải 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. Các mã sau đây làm việc cho tôi:

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

Answer 10

Tôi nghĩ rằng nó sẽ 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> 

Answer 11

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 khác) trên một nút 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 và tìm tất cả các nút. Sau đó, kiểm tra các 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 bạn.

Answer 12

Hãy thử điều này:

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

Answer 13

Tôi tạo ra một hàm jQuery để làm nhiệm vụ này một chút dễ dàng hơn. Chỉ cần thêm video này vào tập tin 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;} 
});}; 

Disable nút 'OK' trên hộp thoại với lớp 'thoại':

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

Enable tất cả các nút:

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

Enable 'Đóng' và thay đổi màu sắc:

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

Tôi hy vọng điều này sẽ giúp ích cho bạn.

Answer 14

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

Ví dụ:

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

hoặc

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

Answer 15

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

Nếu bạn chỉ cần đặt trình xử lý nhấp chuột cho mỗi nút, hãy sử dụng tùy chọn lấy đối số Object.Để tắt 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ó tham số Array.

Ví dụ sau sẽ tắt một nút và cập nhật trạng thái của nó một cách chính xác 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 thoại của bạn với một Array của các nú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 Done sau khi hộp thoại được tạo ra:

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

Answer 16

Trong giao diện người dùng jQuery cũ (phiên bản 1.7.3) Tôi đã có thể chỉ cần 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) mà phương thức không còn hoạt động trong Firefox nữa, nhưng tôi có thể chỉ cần gọi nút giao diện người dùng jquery cụ thể là vô hiệu hóa và bật chức năng trên các đối tượng nút jquery:

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

Answer 17

Rất tiếc, không có giải pháp nào được đưa ra ở đây hoạt động đối với một số hộp thoại trên trang.

Ngoài ra, vấn đề là hộp thoại gốc không chứa ô cửa sổ, nhưng là anh chị em của nó.

Vì vậy, tôi đã đưa ra lựa chọn bởi ID 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 đó là getFirstDialogButton() chức năng tương tự có thể là sau đó được sử dụng để kích hoạt nút, ví dụ sau khi xác thực thành công.

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

Answer 18

Dưới đây là các mẫu từ câu hỏi sửa đổi để vô hiệu hóa các nút một lần 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, những câu dưới đây cũng sẽ rất hữu ích với điều này: How can I disable a button on a jQuery UI dialog?

Answer 19

Dưới đây là một ví dụ mà tôi chỉ thực hiện sử dụng phương pháp Array của các nút gán, 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 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 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(); 

Hy vọng điều này sẽ hữu ích.

Answer 20

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

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

Để thay đổi một văn bản trong một sử dụng nút sau dòng (thay đổi này hủy bỏ nút văn bản để Đóng Me)

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

Answer 21

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

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

Answer 22

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

Answer 23

tôi đã làm việc này với các phương pháp .dialog("widget") mà trả về DIV thoại riêng của mình.Nếu bạn đang ở trong các phương pháp thoại:

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

Answer 24

Tôi tạo ra 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 các dialogClass 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 tồn tại 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ư sau:

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

Để vô hiệu hóa:

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

Để kích hoạt:

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

Answer 25

Calling .attr("disabled", true) công trình tất nhiên, nhưng sử dụng jQuery bạn muốn làm điều đó trong nhiều 'đường' cách, 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ó chức năng enable() và disable(), vì vậy bạn có thể làm công việc của bạn theo cách đó:

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

Đó là giống như

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

và

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

Answer 26

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

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

Answer 27

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

$("#dialog").dialog({ 

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

     } 
}); 

Có vẻ 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ố ...

bằng cách này, nó chỉ truy cập nút từ bên trong gọi lại, trong các trường hợp chung, bạn nên thêm id để truy cập

Answer 28

Nếu có ai muốn thay thế nút bằng hoạt ảnh tải khi được nhấp (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 replaceWith docs

Answer 29

Để vô hiệu hóa một nút, ít mở hộp thoại:

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

Answer 30

Tôi có một nút Tôi không muốn hiển thị cho đến một điểm kích hoạt.

Lúc đầu, tôi đã cố gắng này mà hoạt động: -

$(":button:contains('OK')").hide(); 

nhưng để lại một dòng (vì họ đã hết rồi!), Vì vậy bổ sung này để thay thế trong CSS của tôi: -

.ui-dialog .ui-dialog-buttonpane { 
display: none; 
} 

này ẩn tất cả các nút.

tôi có thể kích hoạt lại khi cần thiết bằng cách: -

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button 

Answer 31

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, nê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 đó, tắt/bật sẽ trông như thế này:

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