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

没问题，我来帮你搞定这个需求。首先要注意的是，你用的是<a>标签做按钮，而HTML里<a>本身并没有原生的disabled属性，所以我们需要结合样式控制和事件拦截来实现禁用效果，具体步骤如下：

步骤1：添加禁用样式（可选但推荐） #

先给按钮加个禁用状态的CSS样式，让用户能直观看到按钮不可用：

.btn-primary.disabled, .btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none; /* 直接阻止点击事件，省得额外写JS拦截逻辑 */
}

步骤2：编写JavaScript逻辑 #

我们需要做两件事：页面加载时初始化按钮状态，以及监听textarea的输入事件实时更新状态。

完整JS代码： #

// 获取页面元素
const commentTextarea = document.getElementById('comment');
const postButton = document.getElementById('btn-post');

// 定义检查并更新按钮状态的复用函数
function updateButtonState() {
  // 去除内容两端空白后判断是否为空（避免用户只输入空格的情况）
  const isContentEmpty = commentTextarea.value.trim() === '';
  
  // 给按钮添加/移除disabled类
  if (isContentEmpty) {
    postButton.classList.add('disabled');
  } else {
    postButton.classList.remove('disabled');
  }
}

// 页面加载完成后初始化按钮状态
document.addEventListener('DOMContentLoaded', updateButtonState);

// 监听textarea的所有内容变化事件（输入、删除、粘贴、拖拽文本等场景都能覆盖）
commentTextarea.addEventListener('input', updateButtonState);

额外优化建议：改用原生标签（更规范） #

其实用<button>标签做交互按钮是更符合HTML语义的选择，它原生支持disabled属性，逻辑会更简洁：

修改后的HTML： #

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

对应的简化版JS代码： #

const commentTextarea = document.getElementById('comment');
const postButton = document.getElementById('btn-post');

function updateButtonState() {
  // 直接给button设置原生disabled属性
  postButton.disabled = commentTextarea.value.trim() === '';
}

document.addEventListener('DOMContentLoaded', updateButtonState);
commentTextarea.addEventListener('input', updateButtonState);

这种方式不用额外写CSS，Bootstrap的.btn类已经自带了禁用状态的样式~

内容的提问来源于stack exchange，提问作者Zoythrus