как отключить диалоговые кнопки jquery

Question

Мои потребности: Я использую модальное диалоговое окно jquery.У меня есть несколько кнопок на нем.Я хочу отключить одну кнопку, когда открывается диалоговое окно, но хочу включить ее после определенной операции.

Что я сделал: Я могу отключить кнопку, добавив это утверждение jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

Проблема: Но теперь я хочу вот чтокогда нажата кнопка редактирования, я выполняю какое-то действие, после выполнения этого действия кнопка «Issue» становится активной.

Мой код указан ниже.

 jQuery(newdiv).dialog({
    width:500,
    height:275,
    dialogClass:'alert',
    modal: true,
    close: function(event, ui) { jQuery(newdiv).html(''); },
    buttons: {
        "issue":function()
        {

        },
        "Edit":function()
        {
          //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement
          jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
        },
        "Cancel":function(){jQuery(this).dialog('close');},
    }
});
jQuery(".ui-dialog-titlebar").hide();
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'});
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

Answer 1

Нет необходимости возиться с классами на кнопках, и это, вероятно, не очень хорошая идея.Кнопки в диалоговом окне jQuery-UI - это кнопки jQuery-UI , и они поддерживают методы disable и enable в обычном стиле jQuery-UI:

$button.button('enable');  // Enable the button
$button.button('disable'); // Disable the button

Прежде всего, замените это:

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

На это:

jQuery('.ui-dialog button:nth-child(1)').button('disable');

Затем в обработчике редактирования сделайте следующее:

jQuery('.ui-dialog button:nth-child(1)').button('enable');

Чтобы активировать кнопку.

Что касается селекторов, главное диалоговое окно <div> имеет класс ui-dialog, поэтому мы начинаем с .ui-dialog.Затем нам нужны кнопки внутри диалога, поэтому мы ищем <button> элементов;это дает нам .ui-dialog button.Кнопки в диалоговом окне перечислены слева направо в том же порядке, что и в опции buttons диалогового окна.Есть несколько способов получить первую кнопку:

• :first-child
• :first
• :nth-child

Я пошел с :nth-child, который является селектором CSS3:

Псевдо- :nth-child(an+b)нотация класса представляет элемент, который имеет an+b-1 siblings перед в дереве документа для любого положительного целого или нулевого значения n и имеет родительский элемент.

Итак button:nth-child(1) - первая кнопка.Я подумал, что если бы вы делали что-то с одной кнопкой, вы, вероятно, в конечном итоге делали бы что-то с другими кнопками, так что, например, вы могли бы сделать .ui-dialog button:nth-child(2), чтобы получить кнопку «Редактировать», и это хорошо совпало бы с селекторомиспользуется для кнопки «Issue».

Answer 2

"Edit":function()
        {
       jQuery(".ui-dialog-buttonpane button:contains('Issue')")
             .removeAttr("disabled")
             .removeClass("ui-state-disabled")
             .addClass('ui-state-default');

        }

Answer 3

Вы можете сделать:

    "Edit":function()
    {
       //perform other actions
      jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
    },

Помните, что элемент ввода с отключенным атрибутом всегда отключен, независимо от того, какое значение вы установите для атрибута: $('input').attr('disabled', false) равно $('input').attr('disabled', 'disabled')

Answer 4

если у вас есть другой диалог в контексте, этот путь jQuery('.ui-dialog button:nth-child(1)').button('disable'); может вызвать некоторые проблемы.

есть несколько шагов, чтобы улучшить это: 1-й: найти дескриптор диалога

$mydialog = $("#divfordialog");

2-й: найти панель кнопок

$buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane");

3-й: найдите целевую кнопку, предположим, что имя кнопки - BTN

$buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")');

последний: обработать (например: отключить, включить);

$buttonwanttocontrol.button("disable");
$buttonwanttocontrol.button("enable");

Вначале мы хотим инициализировать наш статус диалоговой кнопки при ее открытии, это сработает:

$("divfordialog").dialog({
    ...
    buttons : {
        ...
        "BTN" : function () {},
        ...
    },
    open : function () {
        if (shouldDisableBtn()) {
            $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable")
        }
    }
    ...
});