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

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

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

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

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

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

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

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

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

Вы все усложняете простую задачу; В диалоге 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);

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

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

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

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

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?

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

    var dialog_selector = "#myDialogId";

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

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

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

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.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 (версия 1.8.7), этот метод больше не работает в Firefox, но я могу просто вызвать определенные кнопки отключения и включения пользовательского интерфейса jquery для объектов jquery кнопки:

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

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

$("#dialog").dialog({

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

      }
 });

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

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

Если вы действительно хотите отключить кнопку, я обнаружил, что вам также нужно вызвать метод .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");
            }
        }
    }
});

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

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

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

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

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

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

JQuery заменить с документами

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

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