如何仅为选中单选按钮对应的显示textarea设置Bootstrap required属性

嗨，别担心，新手遇到这种表单验证的小坑太正常啦！我来给你两种简单的实现方案，帮你搞定只给当前显示的textarea添加required属性的需求～

方法一：jQuery动态控制required属性 #

这是最直接的方式，通过监听单选按钮的切换事件，动态给对应的textarea添加/移除required属性：

第一步：HTML结构示例 #

先把单选按钮和对应的textarea用ID关联起来（比如option1对应textarea1），方便后续匹配：

<!-- 单选按钮组 -->
<div class="form-group">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="contentOption" id="option1" checked>
    <label class="form-check-label" for="option1">使用文本框1</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="contentOption" id="option2">
    <label class="form-check-label" for="option2">使用文本框2</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="contentOption" id="option3">
    <label class="form-check-label" for="option3">使用文本框3</label>
  </div>
</div>

<!-- 对应的textarea，初始仅显示第一个 -->
<div class="form-group">
  <textarea id="textarea1" class="form-control content-textarea" required></textarea>
  <textarea id="textarea2" class="form-control content-textarea" style="display: none;"></textarea>
  <textarea id="textarea3" class="form-control content-textarea" style="display: none;"></textarea>
</div>

第二步：jQuery逻辑实现 #

监听单选按钮的change事件，每次切换时重置所有textarea的状态，再给当前选中的目标textarea添加required并显示：

$(document).ready(function() {
  // 监听单选按钮切换事件
  $('input[name="contentOption"]').on('change', function() {
    // 1. 隐藏所有textarea，并移除它们的required属性
    $('.content-textarea').hide().removeAttr('required');
    
    // 2. 获取当前选中单选按钮对应的textarea ID
    const targetId = $(this).attr('id').replace('option', 'textarea');
    
    // 3. 显示目标textarea，并添加required属性
    $('#' + targetId).show().attr('required', true);
  });
});

关键说明 #

• 必须动态移除required：因为即使textarea处于隐藏状态，部分浏览器的HTML5表单验证仍然会检查它的required属性，导致表单无法提交。
• 初始状态要设置默认项：像示例里的textarea1，默认显示且带有required，保证页面加载后的验证逻辑正常。

这样处理后，表单验证只会检查当前显示的那个textarea，完美解决你的问题～

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