사용자가 특정 정보를 입력 해야하는 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');
}
}
})
});
답변
disabled 속성 을 설정하려고 합니다
$('#continueButton').attr("disabled", true);
업데이트 : 아하, 이제 복잡성이 보입니다. jQuery를 대화 상자 “단추”섹션에서 사용이 될 것입니다 한 줄 (가지고 있었다.
var buttons = $('.selector').dialog('option', 'buttons');
대화 상자에서 버튼 컬렉션을 가져 와서 루프하여 필요한 것을 찾은 다음 위에 표시된 것처럼 disabled 속성을 설정해야합니다.
답변
매우 간단합니다 :
$(":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);
답변
버튼의 ID를 제공하는 대화 상자를 만들면
$("#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);
답변
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' );
}
답변
버튼을 비활성화합니다 :
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
페이지에 여러 개의 대화 상자가있는 경우 대화 상자 ID를 추가해야합니다.
답변
다음은 클릭 한 후 버튼을 비활성화하기 위해 수정 된 질문의 샘플입니다.
$(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 대화 상자에서 버튼을 비활성화하려면 어떻게해야합니까?