title: Change button's state from another element's behaviour
body: <p>The code I'm writing is on <strong>ASP.net</strong> Web Forms and I'm very new on this field of expertise, but I simplified it to run in pure HTML so that you might be able to help me through scoping into my code from jsfiddle.net. I require to perform few tasks in this snippet of code where some short code(so I believe) is stopping me do accomplish that. I'm writing below of what I ask help from devs to do:</p>
  
  <ul>
  <li>The Save button should be disabled by default and re-enable itself
  whenever one of the inputs has been changed (filled with some info).</li>
  <li>After it has been re-enabled in order to be clicked, I have put a<br>
  jQuery code that triggers/toggles a class to perform a smooth<br>
  progress filling button. I need that CSS transition to run once and<br>
  after it's finished to reset the visual of the button to the default 
  as it looks on the first sight.</li>
  </ul>
  
  <p>Here's the 
  <strong><a href="http://jsfiddle.net/AlbanNurkollari/fs4L3hqc/2/" rel="nofollow">FIDDLE</a></strong>.</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
           #formProfile {
               z-index: 1;
               float: left;
               left: 10px;
               top: 15px;
               position: relative;
               height: 620px;
               width: 500px;
           }
           #userProfileTab {
               position: absolute;
               border-top-left-radius: 10px;
               border-top-right-radius: 10px;
               background-color: teal;
               color: whitesmoke;
               font-size: 36px;
               font-weight: 900;
               font-family: Calibri;
               text-align: center;
               line-height: 170%;
               height: 10%;
               width: 40%;
               top: 0;
               left: 30%;
           }
           #userProfileContainer {
               position: absolute;
               border: 3px solid teal;
               border-radius: 10px;
               height: 89%;
               width: 90%;
               top: 10%;
               left: 5%;
               overflow: auto;
           }
           #profileLabels {
               position: absolute;
               top: 3%;
               left: 0;
               /*border: 2px outset teal;
                      border-radius: 10px;*/
               height: 490px;
               width: 44%;
           }
           #profileFields {
               position: absolute;
               /*border: 2px outset teal;
                      border-radius: 10px;*/
               height: 490px;
               width: 55%;
               top: 3%;
               left: 44%;
           }
           .labels {
               position: absolute;
               border: none;
               border-bottom: 1px solid silver;
               height: 38px;
               width: 90%;
               line-height: 150%;
               color: #848484;
               font-family: Calibri;
               font-size: 24px;
               text-align: right;
               left: 5%;
           }
           .labels:after {
               content:'';
               position: relative;
               left: 3%;
               border-right: 1px solid silver;
           }
           .textBox {
               position: absolute;
               border: 1px dotted black;
               display: block;
               background-color: white;
               box-sizing: border-box;
               color: black;
               height: 34px;
               width: 95%;
               left: 2%;
               margin-top: 2px;
               margin-bottom: 2px;
               text-align: center;
               font-family: Calibri;
               font-style: italic;
               font-size: 16px;
               text-decoration: none;
               outline: 0;
               opacity: 0.75;
               -moz-transition: all .3s;
               -o-transition: all .3s;
               -webkit-transition: all .3s;
               transition: all .3s;
           }
           .textBox:hover {
               opacity: 1;
               border: none;
               background: whitesmoke;
               -webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
               -moz-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
               box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
               -moz-transition: none;
               -o-transition: none;
               -webkit-transition: none;
               transition: none;
           }
           .textBox:focus {
               border-radius: 10px;
               border-style: solid;
               border-width: 2px;
               background-color: lightskyblue;
               color: white;
               font-size: 20px;
               opacity: 1;
               -webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
               -moz-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
               box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75) !important;
           }
          .btnSave {
              position: absolute;
              height: 40px;
              width: 100px;
              background-color: white;
              text-align: center;
              font-family: Calibri;
              font-size: 20px;
              border: 2px solid teal;
              border-radius: 10px;
              outline: none;
              top: 558px;
              left: 330px;
          }
          .buttonFull {
              border: 2px solid teal;
              border-radius: 10px;
              background: white;
              position: absolute;
              height: 40px;
              width: 100px;
              box-shadow: 0 2px 0 silver;
              cursor: pointer;
              overflow:hidden;
              transition: all .1s linear;
          }
          .buttonFull:active {
              box-shadow: none;
              transform: translateY(2px);
          }
          #saveButtonFull {
              top: 480px;
              left: 330px;
          }
          #resetButtonFull {
              top: 480px;
              left: 200px;
          }
          .save, .reset {
              position:absolute;
              font-family: Calibri;
              font-size: 20px;
              font-weight: 900;
              text-align: center;
              z-index: 10;
              -webkit-transition: color 1s ease-in-out;
              -moz-transition: color 1s ease-in-out;
              -o-transition: color 1s ease-in-out;
              transition: color 1s ease-in-out;
          }
          .save {
              top:7px;
              left:30px;
          }
          .reset {
              top:7px;
              left:27px;
          }
          #savedTick, #resetTick {
              display: none;
              position: absolute;
              top: 7px;
              left: 50px;
              color: white;
              font-family: Calibri;
              font-size: 20px;
              text-align: center;
              z-index: 20;
              text-shadow: #99FF66 0px 0px 10px;
          }
          .inner {
              background:#1d9650;
              /*border-radius: 7px;*/
              position: absolute;
              top:0;
              left:0;
              text-align: center;
              width:0;
              height: 100%;
              -webkit-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
              -moz-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
              -o-transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
              transition: all 1000ms cubic-bezier(1.000, 0.040, 0.240, 0.900) !important;
              /* custom */
              -webkit-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
              -moz-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
              -o-transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
              transition-timing-function: cubic-bezier(1.000, 0.040, 0.240, 0.900);
              /* custom */
          }
          .progressBar {
              width: 100px !important;
          }
          .textColorize {
              left: 26px;
              color: white;
          }
          .notransition {
              -webkit-transition-delay: 1s;
              /* Safari */
              transition-delay: 1s;
              width: 0;
          }
      &lt;/style&gt;
  
      &lt;script src="http://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(document).ready(function () {
              //var $heightBody = $(window).height() / 2;
              //var $heightParent = document.getElementById("formLogIn").clientHeight / 2;
              var $widthBody = $(window).width() / 2;
              var $widthParent = document.getElementById("formProfile").clientWidth / 2;
              //var $mrgTop = $heightBody - $heightParent;
              var $mrgLeft = $widthBody - $widthParent;
  
              $("body").css("margin-left", $mrgLeft);
  
              $("#saveButtonFull").on("click", function () {
                  //$(this).off("click");
                  $(".inner").toggleClass("progressBar");
                  $(".save").html("Saved").toggleClass('textColorize');
                  //$(".inner").addClass("notransition").removeClass("notransition");
                  //$(".save").toggleClass('textColorize');
  
          });
  
     &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form id="formProfile"&gt;
          &lt;div id="userProfileTab"&gt;Profile&lt;/div&gt;
          &lt;div id="userProfileContainer"&gt;
              &lt;div id="profileLabels"&gt; &lt;span id="lblFirstName" class="labels" style="border-top: 1px solid silver;"&gt;* First Name&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblSurname" class="labels"&gt;* Surname&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblBirdthay" class="labels"&gt;* Birthday&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblGender" class="labels"&gt;* Gender&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblEmail" class="labels"&gt;* E-mail&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblPhone" class="labels"&gt;Phone&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblCountry" class="labels"&gt;Country/State&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblCity" class="labels"&gt;City/Town&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblAddress1" class="labels"&gt;Address 1&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblAddress2" class="labels"&gt;Address 2&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblZip" class="labels"&gt;Zip/Postal Code&lt;/span&gt;
  
                  &lt;br/&gt;
                  &lt;br/&gt; &lt;span id="lblSignature" class="labels"&gt;Signature&lt;/span&gt;
  
              &lt;/div&gt;
              &lt;div id="profileFields"&gt;
                  &lt;input type="text" id="txtFirstName" class="textBox"&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtSurname" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtBirthday" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtGender" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtEmail" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtPhone" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtCountry" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtCity" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtAddress1" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtAddress2" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtZip" class="textBox"&gt;&lt;/input&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;input type="text" id="txtSignature" class="textBox"&gt;&lt;/input&gt;
              &lt;/div&gt;
  
              &lt;div id="resetButtonFull" class="buttonFull"&gt; 
                  &lt;span id="resetTick"&gt;&amp;#10004;&lt;/span&gt;
                  &lt;span class="reset"&gt;Reset&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div id="saveButtonFull" class="buttonFull"&gt; 
                  &lt;span id="savedTick"&gt;&amp;#10004;&lt;/span&gt;
                  &lt;span class="save"&gt;Save&lt;/span&gt;
                  &lt;div class="inner"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>