根据下拉选择与textarea状态控制按钮禁用状态 实现方案咨询

需求实现方案 #

核心校验规则：

• 下拉框选中Reject选项时，textarea必须存在有效内容按钮才可点击，否则禁用
• 下拉框选中其他选项时，按钮直接保持可用状态
• 同时监听下拉框切换、文本框输入两个场景的状态变化，页面初始化时自动校验初始状态

一、jQuery 改进实现 #

替换原有显隐逻辑为禁用状态控制，补充文本框输入事件监听：

$(document).ready(function(){
  // 封装状态校验函数
  function checkButtonStatus() {
    const selectedVal = $("#selectId").val();
    // 此处.trim()是过滤全空格的无效输入，如果不需要可删除
    const textareaContent = $(".textarea-class").val().trim();
    let isBtnDisabled = false;
    if (selectedVal === "Reject") {
      isBtnDisabled = textareaContent === "";
    }
    // 控制按钮禁用属性
    $("button.button-class").prop("disabled", isBtnDisabled);
  }

  // 绑定两个触发校验的事件
  $("#selectId").on("change", checkButtonStatus);
  $(".textarea-class").on("input", checkButtonStatus);

  // 页面加载完成先校验一次初始状态
  checkButtonStatus();
});

可以补充CSS优化禁用状态的视觉表现：

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

二、纯JavaScript实现（无jQuery依赖） #

逻辑和上面完全一致，替换为原生API即可：

document.addEventListener('DOMContentLoaded', function() {
  const selectEl = document.getElementById('selectId');
  const textareaEl = document.querySelector('.textarea-class');
  const updateBtn = document.querySelector('button.button-class');

  function checkButtonStatus() {
    const selectedVal = selectEl.value;
    const textareaContent = textareaEl.value.trim();
    let isBtnDisabled = false;
    if (selectedVal === 'Reject') {
      isBtnDisabled = textareaContent === '';
    }
    updateBtn.disabled = isBtnDisabled;
  }

  // 绑定事件
  selectEl.addEventListener('change', checkButtonStatus);
  textareaEl.addEventListener('input', checkButtonStatus);

  // 初始化校验
  checkButtonStatus();
});

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