18

私が使用しているコードは次のとおりです。

$('form').bind('keyup change', function(){

送信ボタンはデフォルトで DISABLED に設定されています。入力テキスト フィールド、ラジオ ボタンのチェック状態、またはドロップダウン選択値内で何かが変更された場合は、disabled 属性を削除してボタンを ENABLED に設定する必要があります。

私の最終目標: ここに画像の説明を入力

編集: 何かがデフォルト値に戻された場合、送信ボタンは prop('disabled', true); によって無効に設定されます。- すべての変更を追跡する方法が必要です。

================================================== ==

例: Twitter にアクセスしてサインインし、ドロップダウン メニューから [設定] を選択します。アカウント ページで、ユーザー名を変更し (余分な文字を追加するだけです)、次に下にスクロールし、チェックボックスをオンにして、国の選択を変更します。

下部のボタンが有効になり、前にチェックしたチェックボックスに戻ってチェックを外します。下部のボタンは有効なままです。

一番上までスクロールして UserName を元の状態に戻します。下にスクロールして変更を保存するボタンは有効のままです。国のリストに移動して以前のものに戻します。最後に下にスクロールします。[変更を保存] ボタンをクリックすると、無効になります。

================================================== ==

編集: これは非常に似ているようです。javascript を介してフォームの変更を追跡する最良の方法は何ですか?

引用：「デフォルトで無効にレンダリングし、JavaScriptハンドラーに変更イベントの入力を監視させて有効にすることができます。おそらく、いくつかの非表示フィールドをレンダリングするか、JavaScript値を直接レンダリングして「オリジナル」を保存し、それらの変更イベントで現在のボタンを有効にするか無効にするかを決定するために、オリジナルに対する値. – David Jan 18 at 15:14" (フォームの値が変更された場合にのみ「送信」ボタンを有効にする)。

4

4 に答える 4

62

これは遅い回答であることは知っていますが、この方法では、フィールドに ID を必要とせず、グローバル配列を保存することなく、受け入れられた回答よりもはるかに少ないコードを使用します。

.serialize()データを保存し、変更ごとに一致するかどうかを確認するために使用するだけです。

http://jsfiddle.net/Pug3H/2/

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this)             
            .find('input:submit, button:submit')
                .prop('disabled', $(this).serialize() == $(this).data('serialized'))
        ;
     })
    .find('input:submit, button:submit')
        .prop('disabled', true)
;
于 2014-07-16T21:06:00.890 に答える
13

元の値を保存して、変更のたびにチェックするだけです。

例: http://jsfiddle.net/justincook/42EYq/15/

JavaScript:

// Store original values
var orig = [];             
$("form :input").each(function () {
    var type = $(this).getType();
    var tmp = {'type': type, 'value': $(this).val()};
    if (type == 'radio') { tmp.checked = $(this).is(':checked'); }
    orig[$(this).attr('id')] = tmp;
});

// Check values on change
$('form').bind('change keyup', function () {
    var disable = true;
    $("form :input").each(function () {
        var type = $(this).getType();
        var id = $(this).attr('id');    
        if (type == 'text' || type == 'select') {
            disable = (orig[id].value == $(this).val());
        } else if (type == 'radio') {
            disable = (orig[id].checked == $(this).is(':checked'));
        }    
        if (!disable) { return false; } // break out of loop
    });

    $('#submit-data').prop('disabled', disable); // update button
});

// Get form element type
$.fn.getType = function () { 
    if(this[0].tagName == "INPUT")
        return $(this[0]).attr("type").toLowerCase() 
    else
        return this[0].tagName.toLowerCase();        
}

HTML:

<form id="" action="" method="post">
    <input type="text" value="Carl" name="firstname" id="firstname" />
    <input type="text" value="Johnson" name="lastname" id="lasttname" />
    <input id="radio_1" type="radio" value="female" name="sex" />Female
    <input id="radio_2" type="radio" value="male" name="sex" />Male
    <select id="country-list" name="countries">
        <option value="xx" selected="">Worldwide</option>
        <option value="in">India</option>
        <option value="us">United States</option>
    </select>
    <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>
于 2013-05-16T18:04:15.160 に答える
1

デフォルト値を保持するために data-attribute を追加でき0ます1。

<form id="" action="" method="post">
    <input type="text" data-default="Carl" value="Carl" name="firstname" id="firstname" />
    <input type="text" data-default="Johnson" value="Johnson" name="lastname" id="lasttname" />
    <br />
    <br />
    <input id="female" type="radio" value="female" name="sex" data-default="0" />Female
    <br />
    <input id="male" type="radio" value="male" name="sex" data-default="0" />Male
    <br />
    <br />
    <select id="country-list" name="countries" data-default="xx">
        <option value="xx" selected="">Worldwide</option>
        <option value="in">India</option>
        <option value="il">Israel</option>
        <option value="ru">Russia</option>
        <option value="us">United States</option>
    </select>
    <br />
    <br />
    <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

次に、jquery でフィルターを使用して、変更されたものを取得します

var button = $('#submit-data');
$('form :input').not(button).bind('keyup change', function () {
    // get all that inputs that has changed
    var changed = $('form :input').not(button).filter(function () {
        if (this.type == 'radio' || this.type == 'checkbox') {
            return this.checked != $(this).data('default');
        } else {
            return this.value != $(this).data('default');
        }
    });
    // disable if none have changed - else enable if at least one has changed
    $('#submit-data').prop('disabled', !changed.length);
});

フィドル

于 2013-05-16T18:08:25.363 に答える