jquery，我如何啓用多種形式之間的表單按鈕

Question

我在html頁面中有兩種形式。我試圖啓用和禁用第一種形式的提交按鈕，當輸入值不是空的相同的形式。我正在使用jQuery來做到這一點，但它只是禁用提交按鈕，並沒有在文本輸入（鍵盤按下）響應。請對我的代碼來看看......

HTML代碼：

  <form role="form" method="post" name="music" id="musicPost"> 
       <div class="form-group"> 
        <label for="name">Artist Name</label> 
        <div class="input-group"> 
          <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div> 
          <input class="form-control" type="text" maxlength="25" id="name" name="txtname" placeholder="Enter artist name"> 
        </div> 
       </div> 
       <div class="modal-footer" style="padding-left: 0px; padding-right: 0px;"> 
       <button type="submit" id="register" class="btn btn-success pull-right" value="post-music"> 
        <span class="glyphicon glyphicon-circle-arrow-right"></span> 
        <span class="text">Post</span> 
       </button> 
       </div> 
      </form> 
     <form role="form" method="post" name="music1" id="musicPost1"> 
       <div class="form-group"> 
        <label for="name">Artist Name</label> 
        <div class="input-group"> 
          <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div> 
          <input class="form-control" type="text" maxlength="25" id="name1" name="txtname1" placeholder="Enter artist name"> 
        </div> 
       </div> 
       <div class="modal-footer" style="padding-left: 0px; padding-right: 0px;"> 
       <button type="submit" id="register1" class="btn btn-success pull-right" value="post-music"> 
        <span class="glyphicon glyphicon-circle-arrow-right"></span> 
        <span class="text">Post</span> 
       </button> 
       </div> 
      </form> 

jQuery代碼：

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'); 
}); 

}）;

Answer 1

您需要將keyup附加到您的輸入元素，而不是您的表單元素。

$('#musicpost input').keyup(function() {...} 

我也想知道，如果你只通過表單的輸入域在KEYUP發生，而不是在頁面上的所有輸入字段需要週期。

var trigger = false; 
$(this).find('input[type=text]').each(function() { 
    if (!$(this).val()) { 
     trigger = true; 
    } 
}); 

最後，可以考慮使用change代替keyup