Як можна відключити кнопку в діалоговому вікні інтерфейсу jQuery?


143

Як мені відключити кнопку в діалоговому вікні інтерфейсу jQuery . Я не можу знайти це в жодній документації за посиланням вище.

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


Дивіться відповіді в цій темі: stackoverflow.com/questions/577548/…
Ерік,

5
@Erik - Ситуація дещо змінилася після тих відповідей, а саме через .button()плагін, тому вони вже не завжди є найкращими / чистими рішеннями.
Нік Крейвер

Відповіді:


158

Якщо ви включаєте .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()збігнути підрядку чогось іншого.


next () не буде працювати для мене, оскільки між діалоговим вікном та панеллю кнопки є всі "роздільні зміни". Тому я використав nextAll () і відокремив кнопкуPan від кнопки:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu

Зауважте, що через те, що панель кнопок не є дочірнім діалоговим контейнером, у вас можуть виникнути проблеми, якщо ваша сторінка визначає кілька діалогів.
Бретт Райан

Відмінне рішення з тим, що $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");якщо ви хочете відключити кнопку від функції, яку ви маєте для неї, вам доведеться перетворити цей діалог і відключити кнопку після цього; як це$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
меридіус

3
Зауважте, що якщо ви не хочете запитувати потрібну кнопку за її текстом, ви також можете дати клавіші класу; Діалогове вікно інтерфейсу jQuery підтримує масив з об'єктами для параметра кнопки, кожен об'єкт містить інформацію про атрибути кнопок.
Денніс

Це працювало для мене: $ (this) .closest (". Ui-dialog"). Find ("кнопка: містить ('Зберегти')"). Prop ("вимкнено", правда) .addClass ("ui-state- інвалід ");
Адріан П.

217

Схоже, хтось, навіть у цьому пов'язаному питанні , запропонував це рішення, подібно до першої частини відповіді, даної Ніком Крейвером:

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

15
+1. Я не впевнений, чому ця відповідь не отримала більше голосів. Це найчистіше, що я натрапив і працює чудово.
Дуг Вілсон

38
Це має бути в документах ... це навіть не показує, що ви можете призначити ідентифікатор кнопкам.
Джей К

1
Це, без сумніву, найкраща відповідь. Є інші рішення, які роблять це, шукаючи кнопку, використовуючи неправильні селектори. Гарна робота, Нікола!
jnoreiga

4
Погодьтесь: це рішення, я думав, команда інтерфейсу повинна реалізувати ...: +) Ви можете зробити ще швидше:{text:"ok",disabled:true,click: function(){}}
Матьє

10
Це чудово! Ви також можете використовувати "class" замість "id", якщо ви переживаєте за унікальність ідентифікатора. Хоча вам доведеться набрати трохи більше, щоб шукати кнопку:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
дез

49

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


Справа не в тому, що це недокументовано. Це те, що при обробці кнопок всі властивості об'єкта виконуються проти їх еквівалента властивості jQuery. Наприклад, ви можете додати, attr: { 'data-value' : 'some value here' }якщо хочете додати атрибут data-valueдо кнопки.
розчавити

2
Недокументований більше. Це офіційно.
Салман

Це рішення набагато елегантніше, ніж більш популярна версія. Це дозволяє вам забезпечити всю гнучкість без проблем із чітко визначеними селекторами.
KimvdLinde

Зауважте, що disabledатрибут повинен бути призначений під час створення кнопок.
користувач1032531

Спробував зняти участь, але я виступив 4 години тому і не можу цього зробити. Схоже, це рішення не працює належним чином.
користувач1032531

7

У межах функції натискання кнопок працює наступне:

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

але тоді вам доведеться натиснути, перш ніж воно буде сірим.
Метт

1

Клас ідентифікується класом ui-button. Щоб вимкнути кнопку:

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

Якщо ви не будете динамічно створювати діалогове вікно (яке можливо), ви будете знати положення кнопки. Отже, для відключення першої кнопки:

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

ui-state-disabledКлас , що дає кнопку, гарне затемненому стиль.


1

Я створив функцію 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
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

Ви можете перезаписати масив кнопок і залишити лише потрібні.

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

1

цей код відключить кнопку "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");

0

Ви можете зробити це, щоб відключити першу кнопку, наприклад:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

0

Як я це роблю Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Це найкоротший і найпростіший спосіб, який я знайшов.


0

Якщо ви використовуєте нокаут, то це ще чистіше. Уявіть, що у вас є таке:

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 :

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

В основному ви можете викликати БУДЬ-яку функцію екземпляра jQuery, передаючи її через об’єкт кнопки.

Наприклад, якщо ви хочете використовувати HTML:

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

Або, якщо ви хочете додати клас до кнопки (ви можете зробити це декількома способами):

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

Можливо, ти горіх, і ти хочеш зняти кнопку з купола, коли він завис:

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

Я дуже здивований, що, здається, ніхто не згадував про це в незліченній кількості ниток, як ця ...


0

Це працювало для мене -

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

Ви можете відключити кнопку під час створення діалогового вікна:

$(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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.