使用jQuery根据company-name输入值禁用下拉框，代码未生效如何解决？

• 选择器和HTML属性拼写不匹配：你HTML中行业规模下拉框的name属性写为account-indsutrySize-id，单词industry拼写错误（s和t顺序颠倒），但JS代码的选择器用的是正确拼写的account-industrySize-id，二者不一致导致该下拉框的禁用逻辑完全不生效。你可以选择修改HTML的name为正确拼写，或者调整JS选择器匹配现有HTML的拼写。
• 缺少输入清空后的恢复逻辑：当前代码仅实现了输入框有值时添加禁用的逻辑，没有处理用户删除输入内容的场景，会导致只要输入过一次内容，下拉框就会永久处于禁用状态。
• 事件绑定覆盖场景不全：仅绑定keyup事件只能覆盖键盘输入的场景，用户通过右键粘贴、拖拽填充等非键盘操作输入内容时，逻辑不会触发，建议替换为input事件覆盖所有输入场景。
• 可选优化：CSS缺少定位配置：你给.select-wrapper:before设置了绝对定位，但父元素.select-wrapper没有加position: relative，箭头伪元素会相对整个页面定位，大概率会出现位置错位的问题，建议补充对应CSS配置。

JS代码 #

$(document).ready(function(){
  // 替换为input事件覆盖所有输入场景
  $('.company-name').on('input',function(){
    // 加trim避免空格导致的误判
    const companyValue = $(this).val().trim();
    if(companyValue !== ''){
      // 调整选择器匹配HTML现有拼写，同时链式调用简化代码
      $("select[name='account-indsutrySize-id']").prop("disabled", true).parent().addClass('disable');
      $("select[name='account-industryType-id']").prop("disabled", true).parent().addClass('disable');
      $("select[name='account-legalEntityType-id']").prop("disabled", true).parent().addClass('disable');
    } else {
      // 清空输入时恢复下拉框可用
      $("select[name='account-indsutrySize-id']").prop("disabled", false).parent().removeClass('disable');
      $("select[name='account-industryType-id']").prop("disabled", false).parent().removeClass('disable');
      $("select[name='account-legalEntityType-id']").prop("disabled", false).parent().removeClass('disable');
    }
  })
});

可选补充CSS #

.select-wrapper {
  position: relative;
}

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