Bot Framework：如何禁用用户输入框，选择Yes/No后再启用？

当然可以实现！这是一个很常见的交互需求，核心就是通过JavaScript控制输入框的disabled属性来切换它的可用状态。下面给你一个具体的实现示例，完全匹配你的需求：

示例实现 #

HTML 结构 #

先准备好初始禁用的输入框和Yes/No按钮：

<!-- 初始状态禁用输入框，提示用户先选择选项 -->
<input type="text" id="userInput" placeholder="请先选择Yes/No" disabled>
<button id="yesBtn">Yes</button>
<button id="noBtn">No</button>
<!-- 用于显示选择反馈的容器 -->
<div id="confirmOption"></div>

JavaScript 交互逻辑 #

通过监听按钮点击事件，启用输入框并给出对应的反馈：

// 获取页面元素
const userInput = document.getElementById('userInput');
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');
const confirmOption = document.getElementById('confirmOption');

// Yes按钮点击处理
yesBtn.addEventListener('click', () => {
  confirmOption.textContent = '你选择了Yes！现在可以输入相关内容了';
  // 启用输入框
  userInput.disabled = false;
  // 自动聚焦输入框，提升用户体验
  userInput.focus();
});

// No按钮点击处理
noBtn.addEventListener('click', () => {
  confirmOption.textContent = '你选择了No！现在可以输入相关内容了';
  userInput.disabled = false;
  userInput.focus();
});

额外优化建议 #

• 样式提示：给禁用状态的输入框加个视觉样式，让用户一眼看出它不可用：

input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

• 提交校验：如果这是表单的一部分，可以在提交时检查输入框是否已启用，确保用户确实选择了Yes/No：

// 假设表单id为userForm
document.getElementById('userForm').addEventListener('submit', (e) => {
  if (userInput.disabled) {
    e.preventDefault();
    alert('请先选择Yes/No！');
  }
});

内容的提问来源于stack exchange，提问作者J-K