title: Jquery, how do I enable a form button among mutliple forms
body: <p>I have two forms in a html page. I am trying to enable and disable submit button of first form when input value is not empty in same form. I am using jquery to do that, but it is just disabling the submit button and not responding in text input (keyup press). Please have a look on my code...</p>
  
  <p>Html code:</p>
  
  <pre><code>            &lt;form role="form" method="post" name="music" id="musicPost"&gt;
                 &lt;div class="form-group"&gt;
                      &lt;label for="name"&gt;Artist Name&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                              &lt;div class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/div&gt;
                              &lt;input class="form-control" type="text" maxlength="25" id="name" name="txtname" placeholder="Enter artist name"&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
                &lt;div class="modal-footer" style="padding-left: 0px; padding-right: 0px;"&gt;
                  &lt;button type="submit" id="register" class="btn btn-success pull-right" value="post-music"&gt;
                      &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
                      &lt;span class="text"&gt;Post&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;form role="form" method="post" name="music1" id="musicPost1"&gt;
                 &lt;div class="form-group"&gt;
                      &lt;label for="name"&gt;Artist Name&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                              &lt;div class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/div&gt;
                              &lt;input class="form-control" type="text" maxlength="25" id="name1" name="txtname1" placeholder="Enter artist name"&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
                &lt;div class="modal-footer" style="padding-left: 0px; padding-right: 0px;"&gt;
                  &lt;button type="submit" id="register1" class="btn btn-success pull-right" value="post-music"&gt;
                      &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
                      &lt;span class="text"&gt;Post&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>JQuery code:</p>
  
  <pre><code>jQuery("document").ready(function ($) {
  var $input = $('input:text'),
      $register = $('form#musicPost #register');
  
  $register.attr('disabled', true);
  $('form#musicPost').keyup(function () {
      var trigger = false;
      $input.each(function () {
          if (!$(this).val()) {
              trigger = true;
          }
      });
      trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
  });
  </code></pre>
  
  <p>});</p>