Как отключить кнопку в диалоговом окне пользовательского интерфейса jQuery?

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



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

556   14  

14 ответов:

если вы включаете .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() от подстроку чего-то другого.

151  
2010-09-05 17:49:48

выглядит как любой, даже в это связано вопрос, предложили такое решение, похожее на первую часть ответил Ник Кравира:

$("#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");
202  
2017-05-23 14:55:03

вы также можете использовать не теперь документально :

$("#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/

46  
2015-10-06 19:06:00

следующие работы изнутри кнопки нажмите функцию:

$(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');
            }
        }
    });
}
6  
2011-04-23 18:54:29

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

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

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

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

The ui-state-disabled класс-это то, что дает кнопку, которая хорошо затемнена.

1  
2010-09-05 17:42:40

Я создал функцию 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').dialogButtons('Ok', 'disabled');

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

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

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

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

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

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

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

1  
2010-10-14 23:30:57 
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' );
    }
}
1  
2011-05-29 12:03:05

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

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );
1  
2011-07-16 01:38:43

этот код отключает кнопку с '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");
1  
2015-03-30 10:34:10

вы можете сделать это, чтобы отключить первую кнопку, например:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
0  
2010-09-05 17:43:50

то, как я это делаю Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Это самый короткий и простой способ я нашел.

0  
2014-01-14 21:33:43

если вы используете нокаут, то это еще чище. Представьте, что у вас есть следующее:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

магия начинается с jQuery UI source:

$( "<button></button>", props )

вы можете в принципе вызвать любую функцию экземпляра jQuery, передав ее через объект button.

например, если вы хотите использовать HTML:

{ html: '<span class="fa fa-user"></span>User' }

или, если вы хотите добавить класс к кнопке (вы можете сделать это несколько способы):

{ addClass: 'my-custom-button-class' }

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

{ mouseover: function () { $(this).remove(); } }

Я действительно удивлен, что никто, кажется, не упоминал об этом в бесчисленном количестве потоков, подобных этому...

0  
2014-12-04 22:24: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" );
                                    }
                                }
                        });
                    }
                });
        }
    }
});
0  
2017-10-27 15:12:52

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

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

или вы можете отключить его в любое время после создания диалогового окна:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>
0  
2018-05-30 12:47:17

Comments

    Ничего не найдено.
Click here to cancel reply.