Як я можу відключити кнопку в діалоговому вікні 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');

Вам потрібно буде отримати колекцію кнопок у діалоговому вікні, прокрутити його, щоб знайти, який саме вам потрібен, а потім встановити атрибут вимкнено, як я показав вище.

Це дуже просто:

$(":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 у мене є кілька кнопок). У мене також є кілька діалогів на сторінці, тому мені потрібен спосіб отримати кнопки певного діалогового вікна. Ось моя функція:

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 UI кнопки відключення та включення функцій на об’єктах кнопки 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;}
});};

Відключити кнопку "OK" у діалоговому вікні з класом "dialog":

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

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

_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 кнопка = $ ('кнопка: 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"); } }
});