JavaScript不中的foreach的所有元素工作MVC

Question

我建立徵求意見和他們的答覆代碼..我用@foreach顯示在ViewBag其中有評論列表中的所有元素.. 每一件事情的作品在精細發佈和得到.. 但我的問題是，當我嘗試使「答覆」按鈕的答覆禁用，以防止任何人按下它，而不打字.. 所以我用javascript，但代碼沒有很好地工作.. 首先它只與@foreach的最後一個元素一起工作。在我使用名稱作爲「class」而不是「id」後，它適用於所有元素 ，但問題是..如果我在第一個回覆輸入文本中鍵入例如..按鈕沒有啓用..但如果我在最後回覆打字輸入文本..所有按鈕使.. 我想要的代碼工作，爲每次回覆..只有當在輸入文本有人打字..

的JavaScript

<script>    
 
     var $inputreply = $('.replies'); 
 
     var $buttonreply = $('.replysubmit'); 
 

 
     setInterval(function() { 
 
      if ($inputreply.val().length > 0) { 
 
       $buttonreply.prop('disabled', false); 
 
       } 
 
      else { 
 
       $buttonreply.prop('disabled', true); 
 
       } 
 
       }, 100);      
 
</script>

查看其中有迴圈@foreach評論和回覆每條評論

<section class="comment-list"> 
 
       @foreach (var item in ViewBag.CommentsList) 
 
       {      
 
        <article class="row"> 
 
         <div class="col-md-10 col-sm-10"> 
 
          <div class="panel panel-default arrow left"> 
 
           <div class="panel-body"> 
 
            <header class="text-left" style="direction:rtl;"> 
 
             <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> @item.CommentDateTime</time> 
 
            </header> 
 
            <div class="comment-post"> 
 
             <p>@item.Comment</p> 
 

 
            </div> 
 
            <p class="text-right"><a class="btn btn-default btn-sm replybtn"><i class="fa fa-reply"></i> reply</a></p> 
 
           </div> 
 
          </div> 
 
          <!--ReplyBox--> 
 
          @if (Request.IsAuthenticated) 
 
          { 
 
           using (Html.BeginForm("Reply", "Home", new { @id = @item.PostID, @commentId = @item.ID }, FormMethod.Post)) 
 
           { 
 
            @Html.AntiForgeryToken()                     
 
            <div class="input-group" style="direction:ltr;"> 
 
             <input type="text" class="replies form-control" placeholder="" name="replies" /> 
 
             <span class="input-group-btn"> 
 
              <button class="replysubmit btn btn-primary" type="submit">Reply</button> 
 
             </span> 
 
            </div> 
 
           } 
 
           
 
          } 
 
          else 
 
          { 
 
           <div class="form-horizontal"> 
 
            <div class="alert alert-danger replybox" style="display:none;"> 
 
             <span>please login to reply</span> 
 
            </div> 
 
           </div> 
 
          } 
 
          @foreach (var subitem in ViewBag.Relies) 
 
          { 
 
           if (@subitem.CommentID == @item.ID) 
 
           { 
 
            <article class="row"> 
 
             <div class="col-md-9 col-sm-9"> 
 
              <div class="panel panel-default arrow left"> 
 
               <div class="panel-heading left">Reply</div> 
 
               <div class="panel-body"> 
 
                <header class="text-left"> 
 
                 <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> @subitem.ReplyDate</time> 
 
                </header> 
 
                <div class="comment-post"> 
 
                 <p>@subitem.CommentReply</p> 
 
                </div> 
 
               </div> 
 
              </div> 
 
             </div> 
 
             <div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs"> 
 
              <figure class="thumbnail"> 
 
               <img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" /> 
 
               <figcaption class="text-center">@subitem.UserName</figcaption> 
 
              </figure> 
 
             </div> 
 
            </article> 
 
           } 
 

 
          } 
 

 
         </div> 
 
         <div class="col-md-2 col-sm-2 hidden-xs"> 
 
          <figure class="thumbnail"> 
 
           <img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" /> 
 
           <figcaption class="text-center">@item.userName</figcaption> 
 
          </figure> 
 
         </div> 
 
        </article> 
 
        <br /> 
 

 

 
       } 
 
      </section>

Answer 1

選擇器$('.replysubmit')返回所有具有該css類的項目，因此更新所有這些元素的禁用屬性，而不僅僅是最接近輸入元素的元素。

您應該使用相對選擇器來獲取回覆輸入元素所在表單中的提交按鈕。

jQuery的closest()和find()方法就會得心應手

這應該工作

$(function() { 

    $('.replysubmit').prop('disabled', true); // Disable all buttons when page loads 

    // On the keyup event, disable or enable the buttons based on input 
    $(".replies").keyup(function() { 

     if ($(this).val().length > 0) { 
      $(this).closest("form").find(".replysubmit").prop('disabled', false); 
     } else { 
      $(this).closest("form").find(".replysubmit").prop('disabled', true); 
     } 
    }); 
});