点击按钮单次同时执行移除input只读属性与显示隐藏按钮如何实现

AI 小北

2026-10-3

问题原因

你给同一个编辑按钮绑定了两次点击处理逻辑，同时toggle函数的判断逻辑存在初始值读取错误：初始的按钮display属性是写在CSS样式表中的，不是内联style属性，第一次读取btnEditAbout.style.display时拿到的是空字符串，不满足=== "block"的判断条件，所以第一次点击只会执行移除readonly的逻辑，按钮状态不会切换，第二次点击时内联style已经被赋值，才会触发按钮切换逻辑。
重复绑定点击事件也会增加后续维护风险，建议把两个逻辑合并到同一个处理函数中。

修复后的代码

JS代码

$(document).ready(function() {
  const btnEditAbout = $('#btnEditAbout');
  const addEmp = $('#Addemp');
  const removeEmp = $('#Removeemp');
  const aboutFields = $('.abt');

  btnEditAbout.click(function() {
    // 移除所有abt类输入框的readonly属性
    aboutFields.removeAttr('readonly');
    
    // 切换按钮显示状态
    if (btnEditAbout.is(':visible')) {
      btnEditAbout.hide();
      addEmp.show();
      removeEmp.show();
    } else {
      // 后续需要恢复只读状态时，可在此处补充aboutFields.attr('readonly', 'readonly')逻辑
      btnEditAbout.show();
      addEmp.hide();
      removeEmp.hide();
    }
  });
});