6

フォームを作成しました。これがフィドルです

デフォルトでは、すべてのフィールドは読み取り専用状態です。ここで私がする必要があるのは

  1. 使用時に編集するテキストフィールドをアクティブにしてEdit button、編集ボタン（名前と値）がに変わるはずSAVE buttonです。

  2. 編集が完了したら、ユーザーはをクリックSave buttonする必要があり、最初のステップを再度実行する必要があります。つまり、ボタンを元の状態に戻しEdit、テキストフィールドを次のように変更します。readonly

できればjqueryソリューションを探しています。

少し早いですがお礼を！！

4

2 に答える 2

10

名前を持つすべての要素を取得しEdit、クリックハンドラーをアタッチします。変数prevは前の入力要素でroあり、その要素は読み取り専用属性の状態（true / false）です。

次に、読み取り専用状態を! ro（roではなく）に設定します。これは、「現在の状態とは逆に設定する（必要に応じてトグル機能）」ことを意味し、prev入力をフォーカスします。

最後の行は、現在クリックされているボタンをターゲットにし、変数thisの状態に基づいて三項演算子でテキストを変更します。ro

$('[name="Edit"]').on('click', function() {
    var prev = $(this).prev('input'),
        ro   = prev.prop('readonly');
    prev.prop('readonly', !ro).focus();
    $(this).val(ro ? 'Save' : 'Edit');
});

フィドル

于 2013-03-26T13:10:01.570 に答える
6

最も単純な場合：

// binds a click-handler to inputs whose `name` attribute is equal to 'Edit':
$('input[name="Edit"]').click(function(){
    // when the input is clicked, it looks to the previous input element
    // that has a `required` attribute, and sets its `readonly` property,
    // the `r` is the current readonly state (true or false)
    $(this).prev('input[required]').prop('readonly',function(i,r){
        // returns the value as the opposite  of what it currently is
        // if readonly is false, then it returns true (and vice-versa)
        return !r;
    });
});

JSフィドルデモ。

そして、button：のテキストを変更するために提供します。

$('input[name="Edit"]').click(function(){
    $(this)
    .val(function(i,v){
        return v === 'Edit' ? 'Finished' : 'Edit';
    })
    .prev('input[required]')
    .prop('readonly',function(i,r){
        return !r;
    });
});

JSフィドルデモ。

于 2013-03-26T13:10:53.783 に答える