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

Question

У меня есть диалоговое окно jQuery, которое требует от пользователя ввода определенной информации. В этой форме у меня есть кнопка «Продолжить». Мне бы хотелось, чтобы эта кнопка «продолжить» была включена только после того, как все поля содержат содержимое, иначе она останется отключенной.

Я написал функцию, которая вызывается каждый раз, когда изменяется состояние поля. Тем не менее, я не знаю, как включить и отключить диалоговую кнопку из этой функции. Что мне делать?

Упс, и я забыл упомянуть, что эти кнопки были созданы следующим образом:

$(function() {
  $("#dialog").dialog({
    bgiframe: true,
    height: 'auto',
    width: 700,
    show: 'clip',
    hide: 'clip',
    modal: true,
    buttons: {
      'Add to request list': function() {
        $(this).dialog('close');
        $('form').submit();
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  })
});

Answer 1

Чтобы отключить одну кнопку, при открытии диалога:

$("#InspectionExistingFacility").dialog({
    autoOpen: false, modal: true, width: 700, height: 550,
    open: function (event, ui) {
        $("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
    },
    show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
    buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});

Answer 2

Если кто-то хочет заменить кнопку чем-то вроде анимации загрузки при нажатии (например, когда кнопка «Отправить» отправляет форму в диалоговом окне) - вы можете заменить кнопку изображением следующим образом:

...
buttons: {
    "Submit": function(evt) {
        $(evt.target).closest('button').replaceWith('<img src="loading.gif">');
    }
}

jЗапрос на замену с документами