Disable form inputs by default. Enable them onClick of <a>. Disable onClick of different <a>

Question

Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.

I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.

Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.

<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

Add some selectors to link -

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

Disable all the input fields -

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

Alter the attributes of input fields -

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

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

Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.

Working Demo