如何编写函数检测按钮禁用状态并执行对应搜索流程？

需求说明 #

我需要编写一个函数，用于检测搜索按钮是否处于禁用状态，两种场景的执行逻辑如下：

• 若搜索按钮已禁用，直接执行后续步骤：填写搜索字段，点击「开始搜索」按钮。
• 若搜索按钮已启用，需先点击该按钮显示搜索字段，再执行后续步骤：填写搜索字段，点击「开始搜索」按钮。

参考截图 #

按钮代码样例 #

<button id="mainbody:searchPersRecord:searchIcon" 
  name="mainbody:searchPersRecord:searchIcon" type="button" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only btNormal showHeadArea ui-state-disabled" 
  alt="Open search" title="Open search" onclick="showHeadArea(true); tryFocusComponentInAnyForm('searchHeadField1_Surname'); return false;;window.open('/matrix/views/basis/personalmanagement/searchPersRecord.jsf','_self')" 
  role="button" 
  aria-disabled="false" disabled="disabled">
    <span class="ui-button-icon-left ui-icon ui-c ma-icon ma-search"></span>
    <span class="ui-button-text ui-c">ui-button</span>
</button>

<button id="mainbody:searchPersRecordDivisionForm:searchIcon"
  name="mainbody:searchPersRecordDivisionForm:searchIcon" type="button" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only btNormal showHeadArea" 
  alt="Open search" title="Open search" 
  onclick="showHeadArea(true); tryFocusComponentInAnyForm('number'); return false;;window.open('/matrix/views/basis/personalmanagement/searchDivision.jsf','_self')" role="button" aria-disabled="false">
  <span class="ui-button-icon-left ui-icon ui-c ma-icon ma-search"></span>
  <span class="ui-button-text ui-c">ui-button</span>
</button>

实现方案 #

你可以通过判断按钮的disabled属性或者ui-state-disabled类名来识别禁用状态，下面是可直接使用的JS实现代码：

function handleSearchAction(searchValue) {
  // 匹配当前页面存在的搜索按钮
  const searchBtns = [
    document.getElementById('mainbody:searchPersRecord:searchIcon'),
    document.getElementById('mainbody:searchPersRecordDivisionForm:searchIcon')
  ].filter(Boolean);
  if (searchBtns.length === 0) return;

  const currentBtn = searchBtns[0];
  // 双重判断禁用状态，兼容原生属性和UI框架类名标识
  const isDisabled = currentBtn.hasAttribute('disabled') || currentBtn.classList.contains('ui-state-disabled');

  // 按钮启用时先点击唤起搜索字段
  if (!isDisabled) currentBtn.click();

  // 等待动态搜索字段渲染后执行后续操作
  setTimeout(() => {
    // 匹配对应搜索输入框
    const searchInput = document.getElementById('searchHeadField1_Surname') || document.getElementById('number');
    if (!searchInput) return;
    // 填写搜索内容
    searchInput.value = searchValue;
    searchInput.dispatchEvent(new Event('input'));
    // 点击开始搜索按钮，可根据实际按钮选择器调整
    const submitBtn = document.querySelector('button[id*="startSearch"]') || document.querySelector('form button[type="submit"]');
    submitBtn?.click();
  }, 100);
}

// 调用示例：搜索指定内容
// handleSearchAction('测试搜索内容')

注意事项 #

• 代码同时兼容人员记录搜索、部门搜索两种场景的按钮，会自动匹配当前页面存在的元素
• 100ms延时为适配点击按钮后搜索字段的动态渲染过程，可根据实际页面加载速度调整时长
• 开始搜索按钮的选择器可根据你页面实际的按钮ID/类名修改，当前示例为通用匹配规则

内容的提问来源于stack exchange，提问作者Kamen K.