如何使用jQuery实现单选按钮控制文本框启用/禁用（含初始设置）

没问题，我来帮你搞定这个需求！结合你给出的代码片段，咱们一步步完善实现：

第一步：先搭好HTML基础结构 #

首先得确保页面元素结构合理，单选按钮要设置相同的name属性保证互斥，并且初始给txtB加上disabled属性，确保页面加载时它就是禁用状态：

<!-- 单选按钮组 -->
<div class="ABC">
  <label>
    <input type="radio" name="radioGroup" value="A" checked> 选项A
  </label>
  <label>
    <input type="radio" name="radioGroup" value="B"> 选项B
  </label>
</div>

<!-- 文本框区域 -->
<div class="P">
  <input type="text" id="txtA" placeholder="文本框A">
  <input type="text" id="txtB" placeholder="文本框B" disabled>
</div>

<!-- 如果有对应标签的话（匹配你代码里提到的lblA/lblB） -->
<div class="panel-heading">
  <span id="lblA">文本框A标签</span>
  <span id="lblB">文本框B标签</span>
</div>

第二步：完善jQuery逻辑 #

你提供的代码片段有些不完整，我帮你补全并修正细节，确保功能正常运行：

$(document).ready(function () {
  // 页面加载完成后，双重确认txtB的初始禁用状态，同时隐藏对应标签
  $('#txtB').prop('disabled', true);
  $('#lblB').hide();

  // 监听单选按钮的切换事件
  $('.ABC input[type="radio"]').on('change', function () {
    var selectedVal = $(this).val();

    if (selectedVal === "A") {
      // 选中选项A时：启用txtA，禁用txtB；显示lblA，隐藏lblB
      $('#txtA').prop('disabled', false);
      $('#txtB').prop('disabled', true);
      $('#lblA').show();
      $('#lblB').hide();
    } else if (selectedVal === "B") {
      // 选中选项B时：禁用txtA（如果不需要可以删掉这行），启用txtB；隐藏lblA，显示lblB
      $('#txtA').prop('disabled', true);
      $('#txtB').prop('disabled', false);
      $('#lblA').hide();
      $('#lblB').show();
    }
  });
});

关键细节说明 #

• 控制表单元素的禁用状态，一定要用prop('disabled', true/false)，这是jQuery官方推荐的操作布尔属性的方式，比attr更可靠。
• 单选按钮的change事件会在选中状态改变时触发，确保每次切换选项都能同步更新文本框的状态。
• 初始状态通过HTML属性+jQuery代码双重设置，避免因页面加载顺序导致的异常。

如果你的需求里不需要控制标签的显示隐藏，直接去掉对应的show()和hide()代码就行啦。

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