我正在努力处理一个包含文本区域和链接按钮的网页,其制作方式如下:
<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”),该文件将捕获要处理的文本区域的内容,但文本区域的内容不应该被处理为空,因此,如果文本区域中至少没有一个字符,我希望禁用按钮链接,以避免这种情况。 一些警告:我无法使用提交按钮,并且要禁用的链接按钮必须正是这样。
最佳答案
这是一个使用类和 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>
关于javascript - 当文本区域为空时如何禁用链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49957453/