У меня есть диалоговое окно 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);
Обновить: Ahha, теперь я вижу сложность. Диалоговое окно jQuery Dialog имело одну строку, которая будет использоваться (в разделе "кнопки".
var buttons = $('.selector').dialog('option', 'buttons');
Вам нужно будет получить коллекцию кнопок из диалогового окна, пройти через это, чтобы найти нужную вам, а затем установить отключенный атрибут, как я показал выше.
Это очень просто:
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
Вы все усложняете простую задачу; в диалоговом окне jQueryUI есть два способа установить кнопки по какой-либо причине.
Если вам нужно только установить обработчик кликов для каждой кнопки, используйте параметр, который принимает аргумент Object. Для отключения кнопок и предоставления других атрибутов используйте параметр, который принимает аргумент Array.
Следующий пример отключит кнопку и правильно обновит ее состояние, применив все классы и атрибуты jQueryUI CSS.
Шаг 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);
Мне захотелось найти кнопку по имени (так как у меня есть несколько кнопок в диалоговом окне интерфейса 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' );
}
Если вы создаете диалоговое окно, предоставляющее идентификатор для кнопок,
$("#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);
Это отключает кнопку:
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 UI?
Я нашел простой способ отключить (или выполнить любое другое действие) на кнопке диалога.
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');
Я нашел обходное решение, которое может применяться к людям, пытающимся сделать что-то подобное. Вместо отключения кнопки я поставил простой простой оператор 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");
}
}
}
});
В любом случае, я надеюсь, что это поможет кому-то.
Если вы действительно хотите отключить кнопку, я обнаружил, что вам также нужно вызвать метод .unbind(). В противном случае кнопка может быть активна, а двойной щелчок может привести к представлению нескольких форм. Для меня работает следующий код:
button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
Я создал функцию 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');
Надеюсь, это поможет.
haha, только что нашел интересный метод доступа к Bottons
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
Кажется, вы все не знаете, что в аргументах есть объект события...
кстати, он просто обращается к кнопке из обратного вызова, в общем случае полезно добавить идентификатор для доступа
Только для записи этот пост помог мне решить мою проблему. Короче говоря, вы должны отключить отключенный атрибут, а не 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>
К сожалению, никакие решения из приведенных здесь не работали для нескольких диалогов на странице.
Также проблема заключалась в том, что исходный диалог не содержит панели кнопок сам по себе, но является его родным братом.
Итак, я придумал выбор по идентификатору диалогового окна:
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 для назначения кнопок, который затем позволяет мне использовать селектор id позже - так же, как изначально принятый ответ - включить/отключить кнопки и даже полностью показать/скрыть их Я делаю.
$( "#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" );
}
});
После успешной отправки я отключу и спрячу две кнопки и включив кнопку OK, которая была отключена по умолчанию.
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
Надеюсь, что это поможет.
Я создал функцию, похожую на то, что сделал Nick, но мой метод не требовал установки dialogClass, и вы сможете получить кнопки определенного диалога через id (если в вашем приложении больше одного)
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');
Чтобы отключить кнопку "Сохранить" в диалоговом окне, используйте следующую строку в своей функции.
$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");
Чтобы изменить текст в кнопке, используйте следующую строку (это изменит текст кнопки отмены, чтобы закрыть меня)
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
В мире jQuery, если вы хотите выбрать объект из набора элементов DOM, вы должны использовать eq().
<сильные > Примеры:
var button = $('button'). eq (1);
или
var button = $('button: eq (1)');
@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);
Если кто-то хочет заменить кнопку чем-то вроде анимации загрузки при нажатии (например, когда кнопка "Отправить" отправляет форму в диалоговом окне) - вы можете заменить кнопку своим изображением следующим образом:
...
buttons: {
"Submit": function(evt) {
$(evt.target).closest('button').replaceWith('<img src="loading.gif">');
}
}
Чтобы отключить одну кнопку, в диалоговом окне откройте:
$("#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"); } }
});
У меня была одна кнопка, которую я не хотел показывать до триггерной точки.
Сначала я пробовал это, которое работает: -
$(":button:contains('OK')").hide();
но оставляет строку (потому что все они ушли!), поэтому добавил это в мой CSS: -
.ui-dialog .ui-dialog-buttonpane {
display: none;
}
Это скрывает ВСЕ кнопки.
Я могу снова включить, когда нужно: -
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button