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

Question

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

Answer 1

Попробуйте это:

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

Answer 2

В устаревшем пользовательском интерфейсе 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');

Answer 3

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

$("#dialog").dialog({

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

      }
 });

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

Вот пример, который я только что реализовал, используя метод 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();

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

Answer 9

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

Answer 10

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

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