Как я могу отключить кнопку в диалоговом окне jQuery UI?

Question

Как мне отключить кнопку в диалоговом окне jQuery UI . Я не могу найти это ни в одной документации по ссылке выше.

У меня есть 2 кнопки на модальном подтверждении («Подтвердить» и «Отмена»). В некоторых случаях я хочу отключить кнопку «Подтвердить».

Answer 1

Похоже, кто-то, даже в этом связанном вопросе , предложил это решение, аналогично первой части ответа, данного Ником Крейвером:

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

Тогда в другом месте вы сможете использовать API для кнопки пользовательского интерфейса jquery:

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

Answer 2

Если вы включаете плагин / виджет .button() , который содержит пользовательский интерфейс jQuery (если у вас есть полная библиотека и вы используете 1.8+, вы можете использовать ее, чтобы отключить кнопки и обновляют состояние визуально, например:

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

Вы можете попробовать его здесь ... или, если вы используете более старую версию или не используете виджет кнопки, вы можете отключить его следующим образом:

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

---

Если вы хотите, чтобы это было в определенном диалоге, скажем по идентификатору, то сделайте следующее:

$("#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() сопоставить подстроку чего-то еще.

Answer 3

Вы также можете использовать атрибут not , задокументированный 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/

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

Answer 5

этот код отключает кнопку с YOUR_BUTTON_LABEL. Вы можете заменить имя в содержит (). для отключения

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

замените YOUR_BUTTON_LABEL на ярлык вашей кнопки. для включения

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

Answer 6

Вы можете перезаписать массив кнопок и оставить только те, которые вам нужны.

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

Answer 7

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

Answer 8

Я создал функцию jQuery, чтобы немного упростить эту задачу. Вероятно, теперь есть лучшее решение ... в любом случае, вот мои 2cents. :)

Просто добавьте это в свой файл 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').dialogButtons('Ok', 'disabled');

Включить все кнопки:

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

Включить кнопку «Закрыть» и изменить цвет:

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

Текст на всех кнопках красный:

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

Надеюсь, это поможет:)

Answer 9

Кнопка идентифицируется по классу ui-button.Чтобы отключить кнопку:

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

Если вы не создаете диалог динамически (что возможно), вы будете знать положение кнопки.Итак, чтобы отключить первую кнопку:

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

Класс ui-state-disabled - это то, что дает кнопке приятный затемненный стиль.

Answer 10

Это сработало для меня -

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
});