Как отключить кнопку в диалоговом окне 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');
}
}
})
});
30 ответов
Вы хотели бы установить отключен собственность
$('#continueButton').attr("disabled", true);
обновление: Ахха, теперь я вижу сложность. The Диалог jQuery была одна строка, которая будет использоваться (в разделе "Кнопки".
var buttons = $('.selector').dialog('option', 'buttons');
вам нужно будет получить коллекцию кнопок из диалога, пройти через нее, чтобы найти, какой из них вам нужен, а затем установить атрибут disabled, как я показал выше.
Это очень просто:
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
вы все усложняете простую задачу; диалог jQueryUI имеет два способа установки кнопок по какой-либо причине.
Если вам нужно только установить обработчик щелчка для каждой кнопки, используйте параметр, который принимает
Я хотел найти кнопку по имени (так как у меня есть несколько кнопок в моем диалоговом окне jQuery UI). У меня также есть несколько диалогов на странице, поэтому мне нужен способ получить кнопки определенного диалога. Вот моя функция:
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?
Я получил это работает с методом .dialog("widget") который возвращает диалог DIV сам. Если вы находитесь в диалоговом окне методы:
$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
с точки зрения удобства использования, обычно лучше оставить кнопку включенной, но показать сообщение об ошибке, если кто-то пытается отправить неполную форму. Это сводит меня с ума, когда кнопка, которую я хочу нажать, отключена, и нет подсказки, почему.
Я нашел простой способ отключить (или выполнить любое другое действие) на диалоговой кнопке.
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
вы просто выбираете Родительский диалог и находите все кнопки. Затем, проверив текст вашей кнопки, вы можете идентифицировать свои кнопки.
вот моя функция 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 UI (версия 1.7.3) я смог просто использовать
$('.ui-dialog-buttonpane button')[0].disabled=true;
чтобы просто отключить кнопку на самом элементе DOM. Теперь, когда мы обновили до более нового jQuery UI (версия 1.8.7), этот метод больше не работает в Firefox, но я могу просто вызвать кнопку jQuery UI, специфичную для отключения и включения функций на объектах button jquery:
$('.ui-dialog-buttonpane button').eq(0).button('disable');
ха-ха, только что нашел интересный метод доступа к днищам
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
похоже, вы все не знаете, что в аргументах есть объект события...
кстати, он просто обращается к кнопке из обратного вызова, в общих случаях хорошо добавить идентификатор для доступа
Если вы действительно хотите отключить кнопку, я обнаружил, что вам также нужно позвонить.уберите() метод на нем. В противном случае кнопка может быть активна, и двойной щелчок может привести к нескольким отправкам формы. Для меня работает следующий код:
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" );
}
});
после успешной отправки я отключаю и скрываю две кнопки и включаю кнопку OK, которая была отключена по умолчанию.
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
надеюсь, что это помогает.
Я создал функцию, похожую на то, что сделал Ник, но мой метод не требует установки 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');
просто для протокола, этот пост помог мне решить мою проблему. Короче говоря, вы должны установить атрибут 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);
Я думаю, что он должен работать со всеми,
<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);
в мире jQuery, если вы хотите выбрать объект из набора элементов DOM, вы должны использовать eq ().
примеры:
кнопка var = $('button').eq (1);
или
кнопка var = $('button:eq (1)');
Если кто - то хочет заменить кнопку чем-то вроде анимации загрузки при нажатии (например, когда кнопка "Отправить" отправляет форму в диалоговом окне) - вы можете заменить кнопку своим изображением следующим образом:
...
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