当文本区域为空时如何禁用链接？

Question

我正在努力处理一个包含文本区域和链接按钮的网页，以这种方式制作：

<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>

它们的目的如下：点击链接时将调用一个 javascript 文件（“btn-post”），该文件将捕获要处理的 textarea 的内容，但 textarea 的内容不应该为空，因此，如果文本区域中没有至少一个字符，我希望禁用按钮链接，以避免这种情况。 一些警告：我不能使用提交按钮，并且要禁用的链接按钮必须是那个。

Answer 1

这是一个使用类和 JQuery 的解决方案。当 textarea 为空时，链接被禁用：

$(document).ready(function() {

  $("a#btn-post").addClass("disabled");

  $("textarea#comment").on("input", function() {
    if ($("textarea#comment").val())
      $("a#btn-post").removeClass("disabled");
    else
      $("a#btn-post").addClass("disabled");
  });

});

.disabled {
  pointer-events:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>