2

ブートストラップを使用しており、フォームにインライン ボタンがあります。最初のクリックで、テキストフィールドを編集できるようになります。2 回目のクリックで、変更が ajax 経由で保存されます。

html

<fieldset class="form-horizontal input-append">                
    <legend>Evelyn Jones <span class=" badge badge-important">Account Locked</span></legend>                    
    <div class="alert alert-success" style="display: block;">Success Confirmation.</div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email Address</label>
        <div class="controls">
            <input name="ctl00$ctl00$PortalContent$PortalContent$txtEmailAddress" type="text" value="test" id="txtEmailAddress" class="aspNetDisabled span3" disabled="disabled">
            <a id="lnkEditEmailAddress" class="btn" data-attr="edit"><i class="icon-ok icon-edit"></i></a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="txtUserName">Username</label>
        <div class="controls">
            <input name="ctl00$ctl00$PortalContent$PortalContent$txtUserName" type="text" value="test" id="txtUserName" disabled="disabled" class="aspNetDisabled span3">
            <a id="lnkEditUsername" class="btn" data-attr="edit" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEditUsername','')"><i class="icon-edit"></i></a>
            <a id="lnkEmailUsername" class="btn" data-attr="email" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEmailUsername','')"><i class="icon-envelope"></i></a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail"></label>
         <div class="controls">
                <div class="btn-group">
                    <button class="btn">Unlock Account</button>
                    <button class="btn">Reset Password</button>
                </div>
            </div>
        </div>
     </div>
</fieldset>

jquery

$('.alert').hide();

$('.controls a[data-attr="edit"]').click(function (e) {
    e.preventDefault();        $(this).toggleClass("btn-primary");
    $(this).find('i').toggleClass("icon-white").toggleClass("icon-edit").addClass('icon-ok');
    $(this).siblings('input[type=text]').attr('disabled', function(idx, oldAttr) {
        return !oldAttr;
    });
});

function success() {
    $('.alert').fadeIn();
}

ここにjsfiddleがあります

現在、入力フィールドは希望どおりに切り替わります。ボタンの 2 回目のクリックでのみ成功関数を呼び出すにはどうすればよいですか?

4

1 に答える 1