Question

textarea输入和button附加到我的数据库中发布的所有文章。从技术上讲，它们就像一个“评论”和“回复”框和按钮。

问题是我将keyup函数应用于textarea，因此，如果textarea为空，则按钮保持停用状态。 keyup事件仅适用于第一个评论/回复textarea。如果我使用class，则所有注释中的所有按钮都会被激活。

请帮助，希望我对自己的请求足够清楚。

<form>
  <textarea name="reply" class="reply" id="reply"  placeholder="React to this" required="required">
  <button id="btn" class="btn-reply" type="submit" disabled>Reply
</form>

<script>
  $('.reply').keyup(function() {
    if ($(this).val() <= 0) {
      $(".btn").attr('disabled', true);
    } else {
      $(".btn").attr('disabled', false);
    }
  });
</script>

Answer 1

btn是元素上的id，因此它仅对第一个有效，因为id在DOM中需要唯一。您需要将其更改为类。

然后，您可以使用DOM遍历来查找与单击的按钮相关的.btn-reply，如下所示：

$('.reply').keyup(function() {
  $(this).next('.btn-reply').prop('disabled', $(this).val().trim().length == 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <textarea name="reply" class="reply" id="reply" placeholder="React to this" required="required"></textarea>
  <button id="btn" class="btn-reply" type="submit" disabled>Reply</button>
</form>

这里还有其他一些注意事项。首先，您的HTML无效，因为您错过了textarea和button结束标记。其次，可以通过为if方法提供布尔值来消除对prop()条件的需求。

Answer 2

因为您使用班级，所以该班级的所有按钮均被激活。也许试试这个：

$('.reply').keyup(function(){
    if($(this).val()<=0){
        $(this).next().attr('disabled', true);
    }else{
        $(this).next().attr('disabled', false);
    }
});

查看正在运行的 example

ID应该是唯一的，因此不要对每个按钮都使用id =“ btn”，最好将其删除。您的html无效，因此我在示例中进行了更改。也许是复制粘贴错误

Keyup事件仅在第一个文本区域上触发

2 个答案: