jQuery 대화상자의 버튼을 기능에서 비활성화하려면 어떻게 해야 합니까?

jQuery 대화상자의 버튼을 기능에서 비활성화하려면 어떻게 해야 합니까?

사용자가 특정 정보를 입력해야 하는 jQuery 대화 상자가 있습니다.이 양식에는 "계속" 단추가 있습니다.모든 필드에 내용이 있는 경우에만 이 "계속" 단추를 사용 가능으로 설정하고, 그렇지 않으면 사용 불가능으로 유지합니다.

필드 상태가 변경될 때마다 호출되는 함수를 작성했습니다.하지만 이 기능에서 대화 상자 버튼을 활성화하고 비활성화하는 방법을 모르겠습니다.어떻게 해야 하나?

이러한 버튼이 다음과 같이 생성되었다는 사실을 언급하는 것을 잊었습니다.

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

비활성화된 속성을 설정할 수 있습니다.

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

업데이트: 아하, 이제 복잡함을 알겠네요.jQuery Dialog에는 "버튼" 섹션에서 사용할 단일 행이 있습니다.

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

대화 상자에서 단추 모음을 가져와 필요한 단추를 찾은 다음 위에 표시된 대로 비활성화된 속성을 설정해야 합니다.

매우 간단합니다.

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

jQuery UI 대화상자에는 이유가 있는 단추를 설정하는 두 가지 방법이 있습니다.

버튼에 에는 " " " " " " " " " " " " " " " " " " " " " 을 합니다.Object 속성을 an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an antiArray논쟁.

다음 예제에서는 버튼을 비활성화하고 모든 jQueryUI CSS 클래스 및 속성을 적용하여 상태를 올바르게 업데이트합니다.

-.Array단추의 수:

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

2단계 - 대화 상자가 생성된 후 완료 버튼을 활성화/비활성화합니다.

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

버튼에 대한 ID를 제공하는 대화상자를 만들면,

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

다음 코드로 버튼을 비활성화할 수 있습니다.

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

(jQuery UI 대화 상자에 여러 개의 버튼이 있으므로) 이름으로 버튼을 찾을 수 있기를 원했습니다.또한 페이지에 여러 개의 대화 상자가 있으므로 특정 대화 상자의 단추를 가져올 수 있는 방법이 필요합니다.제 기능은 다음과 같습니다.

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

버튼이 비활성화됩니다.

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

한 페이지에 여러 개의 대화 상자가 있는 경우 대화 상자 ID를 추가해야 합니다.

다음은 단추를 클릭하면 비활성화되도록 수정된 질문의 샘플입니다.

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

또한 다음 질문도 이에 도움이 될 것입니다.jQuery UI 대화 상자에서 버튼을 비활성화하려면 어떻게 해야 합니까?

대화 상자 단추를 사용하지 않도록 설정하거나 다른 작업을 수행하는 쉬운 방법을 찾았습니다.

    var dialog_selector = "#myDialogId";

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

대화 상자의 부모를 선택하고 모든 버튼을 찾기만 하면 됩니다.그런 다음 단추의 텍스트를 확인하면 단추를 식별할 수 있습니다.

대화상자 DIV 자체를 반환하는 방법으로 작업했습니다.대화 방법을 사용하는 경우:

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

사용 편의성 측면에서 볼 때, 일반적으로 버튼을 활성화한 상태로 두되 불완전한 양식을 제출하려는 경우 오류 메시지를 표시하는 것이 좋습니다.클릭하고 싶은 버튼이 비활성화되어 있고 이유를 알 수 없을 때는 짜증이 납니다.

사용해 보십시오.

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

다음은 jQuery 대화 상자에 대한 내 enableOk 함수입니다.

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

첫 번째 버튼은 가장 오른쪽에 있는 버튼입니다.적절한 시각적 효과를 위해 버튼을 비활성화하고 대화 상자의 비활성화 클래스를 설정합니다.

레거시 jQuery UI(버전 1.7.3)에서 간단히

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

DOM 요소 자체의 버튼을 비활성화할 수 있습니다.이제 새로운 jQuery UI(버전 1.8.7)로 업그레이드되었으므로 이 방법은 Firefox에서 더 이상 사용할 수 없지만 jquery UI 버튼별로 jquery 객체에 대한 기능을 비활성화하고 활성화할 수 있습니다.

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

하하, 방금 병에 접근하는 흥미로운 방법을 찾았습니다.

$("#dialog").dialog({

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

      }
 });

여러분은 논쟁에 사건의 대상이 있다는 것을 모르는 것처럼 보입니다...

그나저나, 그것은 콜백 내에서 버튼에 액세스하기만 하면 됩니다, 일반적으로, 액세스를 위한 ID를 추가하는 것이 좋습니다.

단추를 비활성화하려면 .unbind() 메서드도 호출해야 합니다.그렇지 않으면 단추가 계속 활성화되어 두 번 클릭하면 여러 개의 양식이 제출될 수 있습니다.다음 코드를 사용할 수 있습니다.

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

저는 비슷한 일을 하려고 하는 사람들에게 적용될 수 있는 해결책을 찾았습니다.버튼을 비활성화하는 대신 간단한 기능을 추가했습니다.if확인란이 선택되었는지 확인하는 기능의 문입니다.

그렇지 않으면 제출 전에 상자를 확인해야 한다는 간단한 메시지가 표시되었습니다.

예:

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

어쨌든, 그게 누군가에게 도움이 되길 바랍니다.

저는 이 작업을 조금 더 쉽게 하기 위해 jQuery 함수를 만들었습니다.JavaScript 파일에 추가하기만 하면 됩니다.

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

클래스가 'dialog'인 대화 상자에서 'OK' 버튼을 비활성화합니다.

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

모든 단추 사용:

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

'닫기' 버튼을 활성화하고 색상을 변경합니다.

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

이것이 도움이 되길 바랍니다.

안타깝게도 페이지의 여러 대화 상자에서 작동하는 솔루션이 없습니다.

또한 문제는 원래 대화 상자에 단추 창 자체가 포함되어 있지 않고 단추 창의 형제라는 것입니다.

그래서 저는 다음과 같은 대화 상자 ID로 선택하기로 했습니다.

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

...

나중에 동일한 getFirstDialogButton() 기능을 사용하여 버튼을 활성화할 수 있습니다(예: 성공적인 검증 후).

누군가에게 도움이 되길 바랍니다.

다음은 Array(배열) 방식으로 버튼을 할당하는 방법을 사용하여 구현한 예제입니다. 나중에 ID 선택기를 사용할 수 있습니다(원래 승인된 답변처럼). 버튼을 활성화/비활성화하고 버튼을 완전히 표시/숨길 수도 있습니다.

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

성공적으로 제출한 후에는 두 개의 단추를 비활성화 및 숨기기하고 기본적으로 비활성화된 확인 단추를 활성화합니다.

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

이게 도움이 되길 바랍니다.

나는 Nick이 했던 것과 비슷한 기능을 만들었지만, 내 방법은 dialogClass를 설정할 필요가 없으며, 당신은 id를 통해 특정 대화상자의 버튼을 얻을 수 있을 것입니다(애플리케이션에 둘 이상이 있는 경우).

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

이렇게 대화 상자를 만든 경우:

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

다음을 수행하여 단추를 가져올 수 있습니다.

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

비활성화 방법:

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

활성화 방법:

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

참고로, 이 게시물은 제 문제를 해결하는 데 도움이 되었습니다.즉, 비활성화된 특성을 false가 아닌 disabled로 설정해야 합니다.

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

모든 코드는 다음과 같습니다. 또한 비활성화된 것처럼 보이게 하기 위해 몇 가지 스타일을 추가했습니다.

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

모두에게 효과가 있어야 한다고 생각합니다.

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

설명서에 따르면:

https://api.jqueryui.com/dialog/ #옵션-선택사항

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

단순히 버튼을 선택할 수 있도록 버튼에 자체 CSS 클래스를 추가할 수 있습니다. 이 클래스는 활성화/비활성화되어야 합니다.

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

그러면 활성화/비활성화는 다음과 같습니다.

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

내 대화 상자에서 저장 버튼을 비활성화하려면 함수에서 다음 행을 사용합니다.

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

단추의 텍스트를 변경하려면 다음 줄을 사용합니다(취소 단추 텍스트를 닫기로 변경).

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

@Chris 확인란이 선택/해제될 때까지 다음 줄의 코드를 사용하여 대화 상자 단추를 활성화/비활성화할 수 있습니다.

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

원본 출처: http://jsfiddle.net/nick_craver/rxZPv/1/

하기 르기.attr("disabled", true)물론 효과가 있지만, jQuery를 사용하면 좀 더 '설탕' 방식으로 하기를 원하기 때문에 간단한 확장자를 작성했습니다.

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

은 기능이 있습니다.enable()그리고.disable()당신은 당신의 일을 그런 식으로 할 수 있습니다.

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

어느 것이

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

그리고.

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

이것은 저에게 도움이 되었습니다.

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

jQuery 월드에서 DOM 요소 집합에서 개체를 선택하려면 eq()를 사용해야 합니다.

예:

var 버튼 = $('버튼').eq(1);

또는

var 버튼 = $('버튼:eq(1)';

단추를 클릭할 때 애니메이션 로드와 같은 것으로 바꾸려는 사용자가 있는 경우(예: 대화 상자에서 "제출" 단추가 양식을 제출할 때) 다음과 같은 이미지로 단추를 바꿀 수 있습니다.

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

jQuery 문서로 바꾸기

대화 상자가 열릴 때 버튼 하나를 비활성화하려면:

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

언급URL : https://stackoverflow.com/questions/577548/how-can-i-disable-a-button-in-a-jquery-dialog-from-a-function