0

マイページには複数のダイアログボックスがあります。私はそれのために定義された別々の div セクションを持っています。要件ごとに、すべての必須フィールドが入力されなくなるまで、ダイアログ ボックスの保存ボタンを無効にしました。無効にすることができます。他のダイアログボックスを開くと問題が発生します。これらのダイアログ ボックスでも [保存] ボタンが無効になります。

ダイアログボックスのボタンを有効にするスクリプトを配置できますが、これを行いたくないのです。この問題を解決する他の解決策はありますか?

マイページ.cshtml

<div id="MyDialg" title="Dialog 1">
</div>

<input id="btnMy" type="button" value="Dialog1" />

MyJs.JS

$('#MyDialg').dialog({
    autoOpen: false,
    width: 400,
    height: 350,
    modal: true,
    resizable: false,
    buttons: {
        "Cancel": function () { $(this).dialog("close"); },
        "Save": function () {
        }
    }
});

$("#btnMy").button().live("click", function () {
    var diag = $('#MyDialg');
    diag.load("Action/Controller", '', function () {
    });

    $(diag).dialog('open');
    return false;
});

ダイアログの「保存」ボタンを無効にするために、ロード時に以下の行を使用しています：

_MyDialog.cshtml

    $(".ui-dialog-buttonpane button:contains('Save')").button("enable");

ソースコード (ダイアログ html の 1 つ)

<DIV class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" jQuery17205878367688005092="61" sizcache04606232417093721="71" sizset="0"><SPAN id=ui-dialog-title-MyDialg1 class=ui-dialog-title jQuery17205878367688005092="62">MyDialg title</SPAN><A class="ui-dialog-titlebar-close ui-corner-all" role=button href="#" jQuery17205878367688005092="60"><SPAN class="ui-icon ui-icon-closethick" jQuery17205878367688005092="63">close</SPAN></A></DIV> 
<DIV style="MIN-HEIGHT: 0px; WIDTH: auto; HEIGHT: 247px" id=MyDialg1 class="ui-dialog-content ui-widget-content" jQuery17205878367688005092="58" scrolltop="0" scrollleft="0">
<FORM id=form1 method=post action=/action1/controllername jQuery17205878367688005092="172" novalidate="novalidate" data-ajax-success="showSuccessMessage" data-ajax-method="POST" data-ajax="true" data-ajax-failure="showErrorMesage">
<BR>
<DIV class=field><LABEL for=Name>Description: </LABEL><SUP class=mandatory>*</SUP> <INPUT id=Name class="text-box single-line" type=text name=Name> <BR><SPAN class=field-validation-valid data-valmsg-replace="true" data-valmsg-for="Name"></SPAN></DIV><BR><BR>
<HR>
<BR>
</FORM><BR></DIV>
<DIV class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" sizcache04606232417093721="71" sizset="1">
<DIV class=ui-dialog-buttonset sizcache04606232417093721="71" sizset="1"><BUTTON aria-disabled=false class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role=button type=button jQuery17205878367688005092="64"><SPAN class=ui-button-text>Cancel</SPAN></BUTTON><BUTTON aria-disabled=true class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" role=button disabled type=button jQuery17205878367688005092="65"><SPAN class=ui-button-text>Save</SPAN></BUTTON></DIV></DIV>
4

1 に答える 1

1

ダイアログIDを開始点として使用することで、特定のボタンをターゲットにすることができます。上記のコードにあるものは、ボタンを有効/無効にするダイアログに固有のものだと思います。次のコードを使用して、他のダイアログに影響を与えない特定の「保存」ボタンを見つけることができます

$('#MyDialg').find('button:contains("Save")').button('disable');
$('#MyDialg').find('button:contains("Save")').button('enable');

編集：

これを行うには 2 つの方法があります。次を使用して、現在の構造をトラバースして見つけることができます

  1. ダイアログIDから始めます
  2. メインダイアログを見つける
  3. 保存ボタンのテキストを含むスパンを見つける
  4. ボタン コンテナを取得して無効にする

コード

$('#MyDialg').closest('div.ui-dialog').find('span.ui-button-text:contains("Save")').closest('.ui-button').button('disable');

http://jsfiddle.net/wirey00/zDUQX/

または、ボタンにIDを与えることができます

buttons: {
    "Cancel": function () { $(this).dialog("close"); },
    "Save": {
        text: 'Save', // <-- text to show
        id: 'test',  // <-- this sets the id to TEST
        click: function () {
              // code here
        }
    }

次に、IDを使用して無効にします

$('#test').button('disable');

http://jsfiddle.net/wirey00/zf9Wp/

于 2012-08-16T18:03:55.640 に答える