Как я могу отключить кнопку в диалоге 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

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

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

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

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

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

Answer 2

Я создал функцию, аналогичную той, которую делал Ник, но мой метод не потребовал бы установки 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');

Answer 3

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

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

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

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

Answer 4

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

Примеры:

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

или

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

Answer 8

Решение jQuery работает для меня.

$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);

Answer 9

Согласно документации :

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

Answer 10

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

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

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

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

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

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

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

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