Jquery使用多種形式

Question

我在php頁面中使用php代碼生成多個表單，其中每個表單都有一個textarea輸入和一個按鈕。一旦輸入值，按鈕將被啓用，其空按鈕將被禁用。我發現很難觸發textarea和按鈕，因爲php代碼會生成不同類型的未知數量的表單。有沒有其他的方式來觸發窗體，它的按鈕和textarea輸入可以禁用/啓用按鈕？

<form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
       <input name="txtHiddenMusicPostID" value="37" type="hidden"> 
      </div> 
      </div> 
     <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled"> 
     </button> 
</form> 
    <form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
       <input name="txtHiddenMusicPostID" value="37" type="hidden"> 
      </div> 
      </div> 
     <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled"> 
     </button> 
</form> 
<form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
       <input name="txtHiddenMusicPostID" value="37" type="hidden"> 
      </div> 
      </div> 
     <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled"> 
     </button> 
</form> 

jqueryCode：

  jQuery("document").ready(function ($) { 
      var $register = $("button[name='post-Comment']"); 
      //$register.attr('disabled', true); 
      $("textarea[name='txtcomment']").keyup(function() { 
       var trigger = false; 
       $("textarea[name='txtcomment']").each(function() { 
        if ($(this).val() === '') { 
         trigger = true; 
        } 
       }); 
       if (trigger) { 
        $register.attr('disabled', 'disabled'); 
       } else { 
        $register.removeAttr('disabled'); 
       } 
      }); 
     }); 

Answer 1

這是你尋求的效果？

jsFiddle Demo

HTML：

<form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
      <input name="txtHiddenMusicPostID" value="37" type="hidden" /> 
     </div> 
    </div> 
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" /> 
</form> 
<form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
      <input name="txtHiddenMusicPostID" value="37" type="hidden" /> 
     </div> 
    </div> 
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" /> 
</form> 
<form method="POST" name="comment" class="setCommentBox"> 
    <div class="form-group"> 
     <div class="bs-example"> 
      <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea> 
      <input name="txtHiddenMusicPostID" value="37" type="hidden" /> 
     </div> 
    </div> 
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" /> 
</form> 

的jQuery：

$('.btn').prop('disabled',true); 

$("textarea[name='txtcomment']").keyup(function() { 
     if ($(this).val() != '') { 
      $(this).closest('form').find('.btn').prop('disabled', false); 
     }else{ 
      $(this).closest('form').find('.btn').prop('disabled', true); 
     } 
}); 

---

通知噸該按鈕元素被更改爲輸入字段元素。更容易與啓用/禁用等

除非你正在使用一個版本的jQuery < 1.6的工作時，特別是使用.prop()而不是.attr()禁用按鈕：

$register.attr('disabled', 'disabled'); //DO NOT USE THIS 

$register.prop('disabled', true); //USE THIS METHOD 

來源：

.prop() vs .attr()