找到具有非唯一 id 的元素

Question

我在主页上有 3 个帖子，每个帖子都有一个评论表单，我对所有帖子使用一个表单。如果输入中没有文本，我正在使用 jQuery 禁用提交按钮，如果输入中有文本，我也启用提交按钮。问题是每个帖子提交按钮都有相同的 ID，我如何使按钮为每个帖子 ID 的唯一 ID？

 <span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">

  {% csrf_token %}

  <input type="hidden" value={{post.id}} name="post_comment">

  <textarea name="comment_post" class="textinput textInput" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup="if(this.textLength != 0) {submit.disabled = false} else {submit.disabled = true}"></textarea>

  <button type="submit" id="submit" disabled><i class="fas fa-paper-plane" aria-hidden="true"></i></button>
  </form>

  <style>
 .feed-form .fa-paper-plane{color:grey;}
 .feed-form .fa-paper-plane:hover{color:blue;}
 .feed-form #submit[disabled]{opacity:0.5;}
  </style>

Answer 1

你可以试试下面的代码：

<button type="submit" id="submit-{{post.id}}" class="submit" disabled><i class="fas fa-paper-plane" aria-hidden="true"></i></button>

在css中

.feed-form .submit[disabled]{opacity:0.5;}

更新代码：

<span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">

 <input type="hidden" value={{post.id}} name="post_comment">

  <textarea name="comment_post" class="textinput textInput" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>

  <button type="submit" id="submit1" class="submit" disabled>button</button>
  </form>
  </span>

jquery:

$(document).on("keydown",".textinput",function(){
    let buttons = $(this).closest("form").find(".submit")
  if($(this).val() == "") {
  buttons.attr("disabled",true);

  }
  else{
    buttons.attr("disabled",false);
  }
});