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

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”)，该文件将捕获要处理的文本区域的内容，但文本区域的内容不应该被处理为空，因此，如果文本区域中至少没有一个字符，我希望禁用按钮链接，以避免这种情况。一些警告:我无法使用提交按钮，并且要禁用的链接按钮必须正是这样。

Answer 1

这是一个使用类和 JQuery 的解决方案。当文本区域为空时，链接被禁用:

$(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>