Checkbox勾选/取消时禁用TextBox及页面加载状态同步问题

场景与需求 #

• 页面主复选框（id=test）点击时，需要完成：
  • 切换子复选框（id=test1）的禁用/启用状态
  • 清空文本框（id=test2）并切换它的禁用/启用状态
• 额外要求：页面加载时如果test已经勾选，要自动执行上述禁用操作

当前问题 #

• 点击test时，子复选框能正常切换状态，文本框能清空，但加载时test已勾选的情况下，文本框仍可输入
• 手动加了加载判断代码后，文本框被永久禁用，取消勾选test也无法恢复

问题根源 #

• 加载时用attr('disabled', 'disabled')给文本框加了禁用属性，但后续点击取消勾选时，代码只做了清空，没处理禁用状态的移除
• 操作disabled这类布尔属性，jQuery里用prop()比attr()更靠谱，attr()设置后很难正确切换状态

修复方案 #

把所有状态处理逻辑封装成一个函数，页面加载和复选框变化时都调用这个函数，保证逻辑统一：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 示例：默认勾选test复选框模拟加载状态 -->
<input type="checkbox" id="test" checked /> This is test
<br />
<div id="test1">
  <input type="checkbox" id="test1" />This is another test <br />
  <input type="text" id="test2" /> This is a different test<br />
</div>

<script>
  // 统一处理状态的函数
  function handleSectionStatus(isChecked) {
    $('#test1').toggleClass('disableSection', isChecked);
    
    // 处理子复选框：切换禁用状态 + 取消勾选
    $('#test1 input[type="checkbox"]')
      .prop('disabled', isChecked)
      .prop('checked', false);
    
    // 处理文本框：清空内容 + 切换禁用状态
    $('#test1 input[type="text"]')
      .val('')
      .prop('disabled', isChecked);
  }

  // 页面加载时先执行一次，处理初始状态
  handleSectionStatus($('#test').is(':checked'));

  // 绑定复选框的change事件，状态变化时触发
  $('#test').on('change', function() {
    handleSectionStatus($(this).is(':checked'));
  });
</script>

核心优化点 #

• 抽离重复逻辑成函数，避免加载和点击时处理不一致
• 用prop()操作disabled状态，布尔值切换更准确，能正确移除禁用属性
• 加载时主动触发状态处理，确保初始状态符合需求

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