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

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

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

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

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

Следующий пример отключит кнопку и правильно обновит ее состояние, применив все классы и атрибуты jQueryUI CSS.

Шаг 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);

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

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

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

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

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

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

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

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

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

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

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

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

    var dialog_selector = "#myDialogId";

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

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

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

Попробуйте следующее:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

В устаревшем пользовательском интерфейсе jQuery (версия 1.7.3) я смог просто использовать

$('.ui-dialog-buttonpane button')[0].disabled=true;

чтобы просто отключить кнопку самого элемента DOM. Теперь, когда мы обновили новый пользовательский интерфейс jQuery (версия 1.8.7), этот метод больше не работает в Firefox, но я могу просто вызвать функцию jQuery UI для конкретного пользователя и включить функции на объектах jquery:

$('.ui-dialog-buttonpane button').eq(0).button('disable');

Вот моя функция enableOk для диалога jQuery:

function enableOk(enable)
{
    var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');

    if (enable) {
        dlgFirstButton.attr('disabled', '');
        dlgFirstButton.removeClass('ui-state-disabled');
    } else {
        dlgFirstButton.attr('disabled', 'disabled');
        dlgFirstButton.addClass('ui-state-disabled');
    }
}

"Первая" кнопка - самая дальняя справа. Вы оба отключите кнопку и установите класс, отключенный диалогом, для правильного визуального эффекта.

haha, только что нашел интересный метод доступа к Bottons

$("#dialog").dialog({

      buttons: {
        'Ok': function(e) { $(e.currentTarget).button('disable'); }

      }
 });

Кажется, вы все не знаете, что в аргументах есть объект события...

кстати, он просто обращается к кнопке из обратного вызова, в общем случае полезно добавить идентификатор для доступа

Я создал функцию jQuery, чтобы сделать эту задачу немного легче. Просто добавьте это в свой файл JavaScript:

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

Надеюсь, это поможет.

Если вы действительно хотите отключить кнопку, я обнаружил, что вам также нужно вызвать метод .unbind(). В противном случае кнопка может быть активна, а двойной щелчок может привести к представлению нескольких форм. Для меня работает следующий код:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

Я нашел обходное решение, которое может применяться к людям, пытающимся сделать что-то подобное. Вместо отключения кнопки я поставил простой простой оператор if в функции, чтобы проверить, был ли установлен флажок.

Если это не так, в нем отображается простое сообщение о том, что флажок должен быть проверен перед отправкой.

Например:

$("#confirmation-dialog").dialog({
    modal: true,
    autoOpen: false,
    width: 600,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    close: function() {
        $('input[type="submit"]')
      .val('Record Reading')
      .attr('disabled', false);
    },
    buttons: {
        'Confirm Reading': function() {
            if($('#check-box').attr("checked")){
                $(this).dialog('close')
                $('form')
                .addClass('confirmed')
                .submit();
            }
            else {
                $('#please-check').show("slide");
            }
        }
    }
});

В любом случае, я надеюсь, что это поможет кому-то.

Я создал функцию, похожую на то, что сделал Nick, но мой метод не требовал установки dialogClass, и вы сможете получить кнопки определенного диалога через id (если в вашем приложении больше одного)

function getDialogButton( dialog_id, button_name) {
    var target = '#'+dialog_id;
    var buttons = $(target).parent().find('button');
    for ( var i=0; i<buttons.length; ++i ) {
        var jButton = $( buttons[i] );
        if ( jButton.text() == button_name ) {
              return jButton;
        }
    }
    return null;
} 

Итак, если вы создали диалог так:

$(function() {
    $("#myDialogBox").dialog({

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

Вы можете получить кнопки, выполнив следующие действия:

var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn           = getDialogButton('myDialogBox','Cancel');

Чтобы отключить:

addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');

Чтобы включить:

addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');

Вот пример, который я только что реализовал, используя метод Array для назначения кнопок, который затем позволяет мне использовать селектор id позже - так же, как изначально принятый ответ - включить/отключить кнопки и даже полностью показать/скрыть их Я делаю.

$( "#dialog-form" ).dialog({
autoOpen: true,
height: 500,
width: 450,
modal: true,
buttons: [
{
    id: "submit_btn",
    text: "Make Apointment",
    click: function() { 
        //do ajax       
    }       
},
{
    id: "cancel_btn",
    text: "Cancel",
    click: function() {
       $( this ).dialog( "close" );
    }
},
{
    id: "ok_btn",
    text: "OK",
    click: function() {
       $( this).dialog('close');
    },
    disabled: "disabled"
}],
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}
});

После успешной отправки я отключу и спрячу две кнопки и включив кнопку OK, которая была отключена по умолчанию.

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

Надеюсь, что это поможет.

К сожалению, никакие решения из приведенных здесь не работали для нескольких диалогов на странице.

Также проблема заключалась в том, что исходный диалог не содержит панели кнопок сам по себе, но является его родным братом.

Итак, я придумал выбор по идентификатору диалогового окна:

        var getFirstDialogButton = function (dialogSelector) {
            return $('.ui-dialog-buttonpane button:first',
                    $(dialogSelector).parent()[0]);
        };

...

        $('#my_dialog').dialog({
            open: function(event, ui) {
                getFirstDialogButton("#my_dialog")
                 .addClass("ui-state-disabled").attr('disabled', 'disabled' );
            },

...

а затем для включения кнопки может быть использована одна и та же функция getFirstDialogButton(). после успешной проверки.

Надеюсь, это может помочь кому-то.

Я думаю, что он должен работать со всеми,

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog').dialog('open');
        $(function(){
            $('#dialog').dialog({
                autoOpen: true,
                width: 400,
                modal: true,
                overlay: {
                    opacity: 0.8,
                    background: "black"
                },
                resizable: false,
                show: 'slow',
                buttons: {
                    //"OK":function() {
                    //    window.location="index.php?view=list";
                    //},
                    "Cancel": function() {
                        $(this).dialog("close");
                        $(this).attr("class", "button");
                    }
                }
            });

            var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
            dlgFirstButton.addClass('button');
        });
    });
</script>

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

_send_button.attr('disabled','disabled');

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

var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);

Чтобы отключить кнопку "Сохранить" в диалоговом окне, используйте следующую строку в своей функции.

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

Чтобы изменить текст в кнопке, используйте следующую строку (это изменит текст кнопки отмены, чтобы закрыть меня)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

Это помогло мне:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

Вызов .attr("disabled", true), конечно, работает, но с использованием jQuery вы бы хотели сделать это более "сахаром", поэтому я написал простое расширение:

(function( $ ) {
  $.fn.disable = function(isDisabled) {
    var val = isDisabled;
    if (isDisabled === undefined)
        val = true;
    this.attr("disabled", val);
  };
  $.fn.enable = function(isEnabled) {
    var val = !isEnabled;
    if (isEnabled === undefined)
        val = false;
    this.attr("disabled", val); 
  }
})( jQuery );

Теперь у вас есть функции enable() и disable(), поэтому вы можете выполнить свою работу таким образом:

$('#continueButton').disable();

То же, что и

$('#continueButton').disable(true);

и

$('#continueButton').enable(false);

@Chris Вы можете использовать следующие строки кода для включения/выключения диалоговых кнопок, пока ваш флажок не будет установлен/снят флажок

<div id="dialog-confirm" title="test">
    <label>Enable Confirm?<input type="checkbox" checked /></label>
</div>

    $("#dialog-confirm").dialog({
    resizable: false,
    height:240,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Confirm': function() {
            $(this).dialog('close');
        }
    }
});

    $("#dialog-confirm :checkbox").change(function() {
        $(".ui-dialog-buttonpane button:contains('Confirm')")
           .button(this.checked ? "enable" : "disable");
    });

Исходный источник: http://jsfiddle.net/nick_craver/rxZPv/1/

В мире jQuery, если вы хотите выбрать объект из набора элементов DOM, вы должны использовать eq().

<сильные > Примеры:

var button = $('button'). eq (1);

или

var button = $('button: eq (1)');

В соответствии с документацией:

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

Чтобы иметь возможность просто выбрать кнопку, вы можете добавить к ней собственный CSS-класс, который должен быть включен/отключен.

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

Тогда включение/отключение будет выглядеть следующим образом:

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);

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

Сначала я пробовал это, которое работает: -

$(":button:contains('OK')").hide();

но оставляет строку (потому что все они ушли!), поэтому добавил это в мой CSS: -

.ui-dialog .ui-dialog-buttonpane {
display: none;
}

Это скрывает ВСЕ кнопки.

Я могу снова включить, когда нужно: -

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button

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

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

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

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

jQuery replaceWith docs