JSFiddle - React, Tailwind, and code Playground
HTML
<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 href="#" id="edit_profile" class="btn btn-primary">Edit Profile</a>
<a href="#" id="save_button" class="btn btn-primary">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>
JavaScript
$('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);
})