1

2 つのラジオボタンがあり、ラジオボタンを介していくつかのフィールドをアクティブ/非アクティブにします。しかし、ajax 経由でフォームからデータを送信し、ページをリロードせずにフォームを 2 回目に開くと、ラジオ ボタンが壊れます。つまり、アクティブ/非アクティブ機能が提供されません。したがって、たとえば、ボタン 2 をクリックすると、field3 がアクティブになり、必要なデータを入力して ajax 経由でサーバーに送信しますが、ダイアログを 2 回目に開くと、ラジオボタン 2 がまだアクティブであり、ot を変更しようとするとラジオボタン 1 フィールド 1,2 はまだ非アクティブですが、ページをリロードするとすべて問題ありません。どうしたの？ここに私のhtmlコードがあります:

<a href="javascript:void(0)" class="add">click here</a>

<div id="dialog-form" title="title">
    <p class="validateTips">All form fields matched with (*) are required</p>
    <form>
        <fieldset>
            <div>
                <div>
                    <label for="name">Name(*)</label>
                    <textarea id="myName" class="text ui-widget-content ui-corner-all"></textarea>
                </div>
            </div>
            <div>
                <label for="perc">percent(*)</label>
                <input type="number" id ="perc"  step="0.5" />
            </div>
            <div> 
            <table>
                <tr>
                <td>
                    <input type="radio" id="but1" name="group1" value="1">1<br>
                </td>
                <td>
                    <input type="radio" id="but2" name="group1" value="2">2<br>
                </td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <label for="field1">field1 (*)</label>    
                                <input type="text" id="field1" value="" class="group1" > <br>    
                            </tr>
                            <tr>
                                <label for="field2">field2 (*)</label>    
                                <input type="text" id="field2" value="" class="group1" > <br>    
                            </tr>

                        </table>
                    </td>
                    <td>
                            <label for="field3">field3 (*)</label>
                            <input id="field3" type="text" value="" class="group2" >
                    </td>
                </tr>
            </table>
           </div>


        </fieldset>
    </form>
</div>

ラジオボタンを介してフィールドのアクティビティを変更するjQueryコードは次のとおりです。

$(document).ready(function() {
    $("input:radio").on("click", function() {
            makeFieldsActive($(this));
        }); 
});

function makeFieldsActive(elem) {

    $("input:text").prop("disabled", true);
     $("input.group" + elem.val()).prop("disabled", false);
}
4

1 に答える 1

0

ここで（少なくとも）2つの可能性：

ダイアログの内容を空にして再度追加することができます。すべてがデフォルトで設定されていることを確認してください。これを試す最も簡単な方法は、コンテンツがフォームになる新しい html ページを作成し (通常の html タグは必要ありません)、それを div にロードすることです。ページをリロードするのと同じです。ただし、注意してください。一部のブラウザーは、ページをリロードするときにフォーム データを保持する傾向があるため、実際に必要なソリューションではない可能性があります。

$("#dialog-form").empty().load("form.html");

他の方法は、すべての入力をデフォルトにリセットする関数を使用することです:

$("input").prop("disabled",false);

では、このコードをどこに配置しますか? ダイアログを開くときにそれを行うことをお勧めします。特にその目的のために dialogopen というイベントがあります。

$("#dialog-form").dialog(
{
    open: function(event,ui)
    {
        // reset form
    }
});

後で次のように設定することもできます。

$("#dialog-form").on("dialogopen",function(event,ui)
{
     // reset form
});

しかし、 .dialog() ウィジェットはデフォルトでそれを行うはずなので、追加してみてください

$("#dialog-form").dialog();`
于 2012-08-16T13:40:12.873 に答える