Как я могу отключить кнопку в диалоге jQuery от функции? - PullRequest
235 голосов
/ 23 февраля 2009

У меня есть диалоговое окно 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');
      }
    }
  })
});

Ответы [ 32 ]

257 голосов
/ 23 февраля 2009

Вы хотите установить отключенное свойство

 $('#continueButton').attr("disabled", true);

Обновление : Ага, теперь я вижу сложность. В jQuery Dialog была одна строка, которая будет полезна (в разделе «кнопки».

 var buttons = $('.selector').dialog('option', 'buttons');

Вам нужно будет получить коллекцию кнопок из диалогового окна, пройтись по ней, чтобы найти нужную вам, а затем установить атрибут disabled, как я показал выше.

190 голосов
/ 27 января 2010

Все очень просто:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
38 голосов
/ 19 декабря 2010

Вы все усложняете простую задачу; в диалоговом окне jQueryUI есть два способа установки кнопок по определенной причине.

Если вам нужно только установить обработчик щелчка для каждой кнопки, используйте параметр, который принимает аргумент Object. Для отключения кнопок и предоставления других атрибутов используйте параметр, который принимает аргумент Array.

В следующем примере кнопка будет отключена и будет корректно обновляться ее состояние путем применения всех CSS-классов и атрибутов jQueryUI.

Шаг 1 - Создайте свой диалог с помощью Array кнопок:

// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
    {
        id: "done"
        text: "Done",
        click: function() { ... }
    },
    {
        id: "cancel"
        text: "Cancel",
        click: function() { ... }
    }
] });

Шаг 2 - Включить / отключить кнопку Готово после создания диалогового окна:

// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");

// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
    if (button.id === "done") {
        button.disabled = true;
    }
})

// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);
31 голосов
/ 05 июля 2011

Если вы создаете диалог, предоставляющий идентификаторы для кнопок,

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

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

$("#dialogSave").button("option", "disabled", true);
29 голосов
/ 18 января 2010

Я хотел, чтобы можно было найти кнопку по имени (так как у меня есть несколько кнопок в моем диалоговом окне jQuery UI). У меня также есть несколько диалогов на странице, поэтому мне нужен способ получить кнопки определенного диалога. Вот моя функция:

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
                        buttons: {
                                   Cancel: function() { $(this).dialog('close'); },
                                   Submit: function() { ... } 
                             } );

// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
  button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}
19 голосов
/ 11 августа 2009

Это отключает кнопку:

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

Вы должны добавить идентификатор диалога, если у вас есть несколько диалогов на странице.

11 голосов
/ 23 апреля 2011

Вот пример из вопроса, модифицированного для отключения кнопки после нажатия:

$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        height: 'auto',
        width: 700,
        show: 'clip',
        hide: 'clip',
        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');
            }
        }
    });
}

Кроме того, следующий вопрос также будет полезен при этом: Как отключить кнопку в диалоговом окне jQuery UI?

9 голосов
/ 04 августа 2011

Я получил это, работая с методом .dialog("widget"), который возвращает само диалоговое окно DIV. Если вы находитесь в диалоге методов:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
8 голосов
/ 20 августа 2010

Я нашел простой способ отключить (или выполнить любое другое действие) диалоговую кнопку.

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

Вы просто выбираете родителя своего диалога и находите все кнопки. Затем, проверяя текст вашей кнопки, вы можете определить свои кнопки.

8 голосов
/ 08 сентября 2009

С точки зрения юзабилити, обычно лучше оставить кнопку включенной, но показывать сообщение об ошибке, если кто-то пытается отправить неполную форму. Это сводит меня с ума, когда кнопка, которую я хочу нажать, отключена, и нет понятия, почему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...