仅禁用或启用当前按钮

Question

每个周期都有一个 PHP，我从数据库中获取文章。在这些文章中，我们有一个带有表格的评论部分。在发送评论之前，我想用 jQuery 检查输入中是否有任何内容。

由于文章是通过 PHP 循环带来的，我只想检查正在写评论的文章，​​但 jQuery 会检查所有文章，并且只启用或禁用从数据库。我希望 jQuery 只检查带有书面评论的文章。

这就是我正在做的事情：

$(document).ready(function() {
  $(".comment-submit").attr("disabled", true);

  $("#group-post-comment-input").keyup(function() {
    if ($(this).val().length != 0) {
      $(".comment-submit").attr("disabled", false);
    } else {
      $(".comment-submit").attr("disabled", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

<br>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

<br>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

正如您在上面的 sn-p 中看到的，这些按钮仅在仅在第一个输入上写入文本时才启用。我希望在将文本写入其依赖输入时启用按钮。如果输入 2 上有文本，则启用按钮 2，依此类推。

我该怎么做？

Answer 1

由于IDs must be unique to the DOM tree，您可以考虑改用一个类。

$(function() {
  $(".group-post-comment-input").on('keyup', function() {
    let $button = $(this).next('.comment-submit');
    let disabled = !this.value;
    $button.prop('disabled', disabled);
  });
});

form {
  margin: 0 0 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

在我的演示中，我使用 jQuery 的 next() 从触发“keyup”事件的 input 遍历到其关联的 button。

.next([选择器])
获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索下一个兄弟。

另一种方法是使用closest() 向上遍历到表单元素，然后使用find() 返回到按钮。如果您希望您的 HTML 结构以可能破坏next() traversal 的方式发生变化，这可能会很有用。

let $button = $(this).closest('form').find('.comment-submit');

我还建议使用prop() instead of attr() 来启用和禁用输入。

Answer 2

ID 必须是唯一的，
但您需要使用 名称 将信息发送到您的 PHP 服务器

document.querySelectorAll('button.comment-submit').forEach( bt => bt.disabled = true )

document.querySelectorAll('input[name="group-post-comment-input"]').forEach( inEl => 
   inEl.oninput = e =>inEl.nextElementSibling.disabled = (inEl.value.trim().length === 0) )

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>