Question

我正在努力使用包含textarea和链接按钮的网页，以这种方式制作：

<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的内容不应该是空的，因此，如果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>

如何在textarea为空时禁用链接？

1 个答案: