[jquery] 함수에서 jQuery 대화 상자의 버튼을 비활성화하려면 어떻게합니까?

Program / 글쓴이

사용자가 특정 정보를 입력 해야하는 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 대화 상자에서 버튼을 비활성화하려면 어떻게해야합니까?