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

Question

Как мне отключить кнопку в диалоговом окне jQuery UI . Я не могу найти это ни в одной документации по ссылке выше.

У меня есть 2 кнопки на модальном подтверждении («Подтвердить» и «Отмена»). В некоторых случаях я хочу отключить кнопку «Подтвердить».

Answer 1

Вы можете отключить кнопку при создании диалога:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

Или вы можете отключить его в любое время после создания диалога:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>

Answer 2

Если вы используете нокаут, то это даже чище.Представьте, что у вас есть следующее:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

Магия исходит от источника пользовательского интерфейса jQuery :

$( "<button></button>", props )

Вы можете в основном вызывать ЛЮБУЮ функцию экземпляра jQueryпередавая его через объект кнопки.

Например, если вы хотите использовать HTML:

{ html: '<span class="fa fa-user"></span>User' }

Или, если вы хотите добавить класс для кнопки (вы можете сделать этонесколькими способами):

{ addClass: 'my-custom-button-class' }

Может быть, вы с ума сошли, и хотите убрать кнопку из домена, когда она зависла:

{ mouseover: function () { $(this).remove(); } }

---

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

Answer 3

То, как я это делаю, Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Это самый короткий и простой способ, который я нашел.

Answer 4

Вы можете сделать это, чтобы отключить первую кнопку, например:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');