함수에서 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');
      }
    }
  })
});

disabled 속성 을 설정하려고 합니다

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

업데이트 : 아하, 이제 복잡성이 보입니다. jQuery를 대화 상자 "단추"섹션에서 사용이 될 것입니다 한 줄 (가지고 있었다.

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

대화 상자에서 버튼 컬렉션을 가져 와서 루프하여 필요한 것을 찾은 다음 위에 표시된 것처럼 disabled 속성을 설정해야합니다.

매우 간단합니다 :

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

당신은 간단한 일을 복잡하게 만듭니다. jQueryUI 대화 상자에는 두 가지 이유로 버튼을 설정하는 방법이 있습니다.

각 버튼에 대해 클릭 핸들러 만 설정해야하는 경우 Object인수 를 취하는 옵션을 사용하십시오 . 버튼을 비활성화하고 다른 속성을 제공하려면 Array인수 를 취하는 옵션을 사용하십시오 .

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

1 단계- 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);
        }
    });

대화 상자의 부모를 선택하고 모든 버튼을 찾으십시오. 그런 다음 버튼의 텍스트를 확인하면 버튼을 식별 할 수 있습니다.

.dialog("widget")대화 상자 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 요소 자체의 버튼을 비활성화하십시오. Firefox에서 더 이상 작동하지 않는 최신 jQuery UI (버전 1.8.7)로 업그레이드되었으므로 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 () 함수를 사용하여 버튼을 활성화 할 수 있습니다 (예 : 유효성 검사 성공 후).

그것이 누군가를 도울 수 있기를 바랍니다.

다음은 방금 버튼 할당 방법을 사용하여 구현 한 예입니다. 이후에 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" );
}
});

성공적으로 제출 한 후 두 개의 버튼을 비활성화하고 숨기고 기본적으로 비활성화 된 OK 버튼을 활성화합니다.

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

기록을 위해이 게시물은 내 문제를 해결하는 데 도움이되었습니다. 즉, 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>

대화 상자에서 저장 버튼을 비활성화하려면 함수에서 다음 줄을 사용하십시오.

$(".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 button = $ ( 'button'). eq (1);

또는

var button = $ ( 'button : eq (1)');

설명서 에 따르면 :

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

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

클릭 할 때 버튼을 로딩 애니메이션과 같은 것으로 바꾸려는 사람이있는 경우 (예 : "제출"버튼이 대화 상자에서 양식을 제출할 때)-다음과 같이 버튼을 이미지로 바꿀 수 있습니다.

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

문서로 jQuery replace

하나의 버튼을 비활성화하려면 대화 상자를 엽니 다.

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