javascript - 默认禁用表单输入。启用它们 onClick of <a>。禁用不同 <a> 的 onClick

Question

基本上，我希望在单击“编辑配置文件”按钮之前禁用所有表单输入，然后在单击“保存更改”按钮后，重新应用禁用属性。

我已经尝试了该站点的一系列解决方案，但都没有成功。任何帮助将不胜感激，即使它只是指导我正确的方向。

这是代码，它使用 Bootstrap 并包含 Django(显然未显示)。提前致谢。

<div class="main">
    <div class="container">
        <section class="hgroup">
            <h1>My Profile</h1>
            <h2>View and edit your profile.</h2>
            <ul class="breadcrumb pull-right">
                <li><a href="../dashboard">Dashboard</a> </li>
                <li class="active">Profile</li>
            </ul>
        </section>
        <section>
            <div class="row">
                <div class="contact_form col-sm-12 col-md-12">
                    <form name="contact_form" id="contact_form" method="post">
                        <div class="row">
                            <div class="col-sm-4 col-md-4">
                                <label>First Name</label>
                                <input name="first_name" id="name" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Middle Name</label>
                                <input name="middle_name" id="email" class="form-control" type="text" value="">
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <label>Last Name</label>
                                <input name="last_name" id="email" class="form-control" type="text" value="">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <br/>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
                            <a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
                            <!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>

Answer 1

添加一些选择器链接 -

<a href="#" id="edit_profile" class="btn btn-primary">Edit Profile</a>
<a href="#" id="save_button" class="btn btn-primary">Save Changes</a>

禁用所有输入字段 -

$('input').attr('disabled', true);

更改输入字段的属性 -

$('#edit_profile').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', false);
});

$('#save_button').on('click', function(e) {
    e.preventDefault();
    $('input').attr('disabled', true);
});

不要忘记包含 jquery。 e.preventDefault() 用于防止 a 的默认操作。

Working Demo