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

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

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

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

Если вам нужно только установить обработчик события click для каждой кнопки, использовать опцию, которая принимает

Я хотел бы иметь возможность найти кнопку по имени (так как у меня есть несколько кнопок в моем диалоговом окне 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' );
}

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

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

вот моя функция 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');
    }
}

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

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

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

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

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

ха-ха, только что нашел интересный способ доступа к bottons

$("#dialog").dialog({

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

      }
 });

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

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

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

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

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

Я создал функцию 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');

Я надеюсь, что это помогает.

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

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

поэтому я придумал выбор по идентификатору диалога следующим образом:

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

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

вот пример, который я только что реализовал с помощью метода Array назначения кнопок, который затем позволяет мне использовать селекторы идентификаторов позже - так же, как и принятый ответ, заявленный изначально, - чтобы включить/отключить кнопки и даже показать/скрыть их полностью, как я это делаю.

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

надеюсь, что это помогает.

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

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

просто для протокола, этот пост помог мне решить мою проблему. Короче говоря, вы должны установить атрибут disabled в disabled, а не в 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);

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

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

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

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

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

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

@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/

вызов .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);

Это сделало работу для меня:

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

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

примеры:

кнопка var = $('кнопка').eq (1);

или

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

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

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

jQuery replaceWith docs

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

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

у меня была одна кнопка, которую я не хотел отображать до момента запуска.

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

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

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

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

это скрывает все кнопки.

Я могу повторно включить, когда это необходимо: -

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