cách vô hiệu hóa các nút hộp thoại jquery

Question

Nhu cầu của tôi: Tôi đang sử dụng hộp thoại chế độ jquery. Tôi có một số nút trên đó. Tôi muốn vô hiệu hóa một nút khi hộp thoại Mở ra nhưng muốn bật nó sau một số thao tác cụ thể.

Tôi đã làm gì: Tôi có thể tắt nút bằng cách thêm tuyên bố này jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

Vấn đề: Nhưng bây giờ điều tôi muốn là khi nhấn nút chỉnh sửa, tôi thực hiện một số hành động, sau khi thực hiện hành động đó, nút 'Vấn đề' sẽ được bật.

Mã của tôi ở bên dưới.

jQuery(newdiv).dialog({ 
    width:500, 
    height:275, 
    dialogClass:'alert', 
    modal: true, 
    close: function(event, ui) { jQuery(newdiv).html(''); }, 
    buttons: { 
     "issue":function() 
     { 

     }, 
     "Edit":function() 
     { 
      //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement 
      jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default'); 
     }, 
     "Cancel":function(){jQuery(this).dialog('close');}, 
    } 
}); 
jQuery(".ui-dialog-titlebar").hide(); 
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'}); 
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled"); 

Answer 1

Không cần phải bận tâm với các lớp học trên các nút và nó có lẽ không phải là một ý tưởng hay. Các nút trong một hộp thoại jQuery-UI là jQuery-UI buttons và họ hỗ trợ disable và enable phương pháp theo phong cách jQuery-UI thông thường:

$button.button('enable'); // Enable the button 
$button.button('disable'); // Disable the button 

Trước hết, thay thế này:

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

Với điều này :

jQuery('.ui-dialog button:nth-child(1)').button('disable'); 

Sau đó, trong trình xử lý chỉnh sửa của bạn, hãy làm điều này:

jQuery('.ui-dialog button:nth-child(1)').button('enable'); 

Để bật nút.

Theo như các bộ chọn đi, hộp thoại chính <div> có lớp ui-dialog để chúng tôi bắt đầu với .ui-dialog. Sau đó, chúng tôi muốn các nút bên trong hộp thoại vì vậy chúng tôi đang tìm kiếm các yếu tố <button>; điều này cho chúng ta .ui-dialog button. Các nút trong hộp thoại được liệt kê từ trái sang phải theo thứ tự như trong tùy chọn buttons đối với hộp thoại.Có nhiều cách khác nhau để có được nút đầu tiên:

• :first-child
• :first
• :nth-child

tôi đã đi với :nth-child mà là một selector CSS3:

Các :nth-child(an+b) giả ký hiệu-lớp đại diện cho một phần tử h là an+b-1 anh chị em trước trong cây tài liệu, cho bất kỳ số nguyên dương hoặc giá trị bằng không nào là n và có phần tử gốc.

Vì vậy, button:nth-child(1) là nút đầu tiên. Tôi nghĩ rằng nếu bạn đang làm việc với một nút, bạn có thể sẽ làm mọi thứ với các nút khác, ví dụ: bạn có thể làm .ui-dialog button:nth-child(2) để nhận nút "Chỉnh sửa" và nút đó sẽ phù hợp với bộ chọn được sử dụng cho nút "Sự cố".

Answer 2

Bạn có thể làm:

"Edit":function() 
    { 
     //perform other actions 
     jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default'); 
    }, 

Hãy nhớ rằng, một yếu tố đầu vào với các thuộc tính vô hiệu hóa luôn bị vô hiệu hóa, bất kể giá trị mà bạn thiết lập các thuộc tính để: $('input').attr('disabled', false) bằng $('input').attr('disabled', 'disabled')

Answer 3

"Edit":function() 
     { 
     jQuery(".ui-dialog-buttonpane button:contains('Issue')") 
      .removeAttr("disabled") 
      .removeClass("ui-state-disabled") 
      .addClass('ui-state-default'); 

     } 

Answer 4

nếu bạn có hộp thoại khác trong ngữ cảnh, theo cách này jQuery('.ui-dialog button:nth-child(1)').button('disable'); có thể gây ra một số sự cố.

có một vài bước để cải thiện điều này: 1: tìm ra xử lý thoại

$mydialog = $("#divfordialog"); 

2: tìm bảng điều khiển nút

$buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane"); 

3: tìm nút mục tiêu, giả sử nút của tên là BTN

$buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")'); 

cuối cùng: xử lý nó (ví dụ: tắt, bật);

$buttonwanttocontrol.button("disable"); 
$buttonwanttocontrol.button("enable"); 

offently, chúng tôi muốn init tình trạng nút thoại của chúng tôi khi nó mở, điều này sẽ làm việc tìm:

$("divfordialog").dialog({ 
    ... 
    buttons : { 
     ... 
     "BTN" : function() {}, 
     ... 
    }, 
    open : function() { 
     if (shouldDisableBtn()) { 
      $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable") 
     } 
    } 
    ... 
});