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

jQuery UI 대화 상자 에서 버튼 을 비활성화하는 방법은 무엇입니까 ? 위 링크의 문서에서 찾을 수없는 것 같습니다.

모달 확인에 2 개의 버튼이 있습니다 ( “확인”및 “취소”). 어떤 경우에는 “확인”버튼을 비활성화하고 싶습니다.

답변

당신이 포함하고 만약 .button()플러그인 / 위젯 jQuery를 UI가 (당신이 전체 라이브러리를 가지고 있고 1.8 이상에있는 경우, 당신은 그것을 가지고) 버튼을 비활성화하는 데 사용할 수 있습니다 포함되어 있는지 와 같은 시각적 상태를 업데이트 :

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

여기에서 시도해 볼 수 있습니다 … 또는 이전 버전이거나 버튼 위젯을 사용하지 않는 경우 다음과 같이 비활성화 할 수 있습니다.

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

특정 대화 상자 내에서 ID로 말하면 다음과 같이하십시오.

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

:contains()거짓 긍정을 줄 수 있는 다른 경우에는 다음 .filter()과 같이 사용할 수 있지만 두 개의 버튼을 알고 있기 때문에 여기에서 과잉입니다. 경우 그 다른 상황의 경우, 그것은 다음과 같을 것입니다 :

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

이렇게하면 :contains()다른 문자열이 일치 하지 않습니다.

답변

도에 사람처럼 보이는 이 링크 된 질문 , 닉 Craver에 의해 주어진 답의 첫 번째 부분과 유사한이 솔루션을 제안 하였다 :

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

그런 다음 다른 곳 에서 jquery UI 버튼에 API 를 사용할 수 있어야 합니다.

$("#button-ok").button("disable");

답변

지금 문서화 ~~되지 않은~~disabled 속성을 사용할 수도 있습니다 .

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    },
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){
               $(this).dialog("close");
        }

    }]
});

대화 상자를 연 후 활성화하려면 다음을 사용하십시오.

$("#my-button-1").attr('disabled', false);

JSFiddle : http://jsfiddle.net/xvt96e1p/4/

답변

버튼 클릭 기능 내에서 다음이 작동합니다.

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}

답변

버튼은 클래스로 식별됩니다 ui-button. 버튼을 비활성화하려면 :

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

대화 상자를 동적으로 작성하지 않는 한 (가능한 경우) 단추의 위치를 알게됩니다. 따라서 첫 번째 버튼을 비활성화하려면

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

ui-state-disabled클래스는 멋진 스타일을 흐리게하는 버튼을 제공하는 것이다.

답변

이 작업을 좀 더 쉽게하기 위해 jQuery 함수를 만들었습니다. 아마도 지금은 더 나은 해결책이있을 것입니다 … 어느 쪽이든, 여기 내 2 센트가 있습니다. 🙂

이것을 JS 파일에 추가하십시오.

$.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’가있는 대화 상자에서 ‘확인’버튼을 비활성화하십시오.

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

모든 버튼을 활성화합니다 :

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

‘닫기’버튼을 활성화하고 색상을 변경하십시오.

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

모든 버튼의 텍스트가 빨간색 :

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

도움이 되었기를 바랍니다 🙂

답변

function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}