基于复选框启用/禁用表单输入框的通用jQuery实现方案求助

没问题，这事儿用jQuery做起来超高效！咱们可以通过自定义数据属性来建立复选框和对应输入框的关联，只用一套代码就能搞定所有字段，再也不用重复写一堆单独的事件绑定了。

步骤1：修改HTML结构，添加关联标识 #

给每个控制输入框的复选框加上data-target属性，属性值写对应输入框的CSS选择器（name、id或者类选择器都可以）：

<!-- 姓名字段 -->
<label>
  <input type="checkbox" id="nCheck" data-target='input[name="Name"]'>
  编辑姓名
</label>
<input type="text" name="Name" disabled placeholder="请输入姓名">

<!-- 职位字段 -->
<label>
  <input type="checkbox" id="pCheck" data-target='input[name="Position"]'>
  编辑职位
</label>
<input type="text" name="Position" disabled placeholder="请输入职位">

<!-- 支持一个复选框控制多个输入框，只需用逗号分隔选择器 -->
<label>
  <input type="checkbox" data-target='input[name="Email"], input[name="Phone"]'>
  编辑联系方式
</label>
<input type="text" name="Email" disabled placeholder="邮箱">
<input type="text" name="Phone" disabled placeholder="电话">

步骤2：编写通用jQuery代码 #

只需要绑定一次事件，就能处理所有带data-target的复选框：

$(document).ready(function() {
  // 初始化：页面加载时同步复选框和输入框的状态
  $('input[type="checkbox"][data-target]').each(function() {
    syncInputState($(this));
  });

  // 绑定复选框的change事件（点击/切换状态时触发）
  $('input[type="checkbox"][data-target]').on('change', function() {
    syncInputState($(this));
  });

  // 封装同步状态的函数，复用逻辑
  function syncInputState(checkbox) {
    const isChecked = checkbox.is(':checked');
    const targetSelector = checkbox.data('target');
    // 用prop()处理disabled布尔属性，比attr()更可靠
    $(targetSelector).prop('disabled', !isChecked);
  }
});

关键细节说明 #

• 为什么用prop()而不是attr()？
  disabled是HTML的布尔属性，它的存在就代表“禁用”，不存在代表“启用”。prop()专门用来处理这类DOM元素的属性状态，比attr()更准确，不会出现状态不同步的问题。
• 支持批量控制：如果一个复选框要控制多个输入框，只需要在data-target里用逗号分隔多个选择器就行，代码完全不用修改。
• 初始化逻辑：页面加载时自动同步状态，避免出现复选框已勾选但输入框还是禁用的情况。

这样一套代码就能适配所有需要这种控制逻辑的字段，后续新增字段只需要给复选框加data-target就行，不用再写新的JS代码啦！

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