切换Radio按钮时如何保留输入框修改状态并实现预期交互？

你的问题核心是切换单选按钮时未重置之前的状态，导致状态叠加异常（比如选完"Property"再选"Substream"时，之前被禁用的输入框未恢复启用）。每次切换单选按钮，必须先将所有元素恢复到初始状态，再应用当前选中项的规则。

修复后的JavaScript代码 #

$(document).ready(function() {
  // 初始状态配置
  $("select").prop("hidden", true);
  $("#inputContainer input").prop("hidden", false);
  const allInputs = $(".form-control");
  const allSubmits = $("button[type='submit']");

  // 统一监听所有单选按钮的change事件
  $("input[name='option']").on("change", function() {
    // 第一步：重置所有状态，清除之前的修改
    allInputs.prop("disabled", false);
    $("#inputContainer input").prop("hidden", false);
    $("select").prop("hidden", true);
    allSubmits.prop("hidden", true);

    // 第二步：根据当前选中值执行对应逻辑
    const selectedValue = $(this).val();
    switch(selectedValue) {
      case "Idea":
        $("#inputContainer input").prop("hidden", true);
        $("select").prop("hidden", false);
        $("#submitsIdea").prop("hidden", false);
        break;
      case "Property":
        allInputs.not("#property").prop("disabled", true);
        $("#submitsProp").prop("hidden", false);
        break;
      case "Substream":
        allInputs.not("#substream").prop("disabled", true);
        $("#submits").prop("hidden", false);
        break;
    }
  });

  // 页面加载时触发一次当前选中项的逻辑（确保初始状态正确）
  $("input[name='option']:checked").trigger("change");
});

对应修改后的HTML代码（仅移除冗余的onclick属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container mt-4 col-md-6 col-sm-10 col-sm-offset-1">
  <div class="result alert alert-success" hidden role="alert"></div>
  <h2>Add your new tool</h2>
  <form action="add_Form.php" method="POST">
    <div class="d-flex flex-row mb-4 mt-4">
      <div class="form-check mx-3">
        <input type="radio" class="form-check-input" name="option" id="option1" value="Idea">
        <label class="form-check-label" for="option1">Add an Idea</label>
      </div>
      <div class="form-check mx-3">
        <input type="radio" class="form-check-input" name="option" id="option2" value="Property">
        <label class="form-check-label" for="option2">Add Property only</label>
      </div>
      <div class="form-check mx-3">
        <input type="radio" class="form-check-input" name="option" id="option3" value="Substream">
        <label class="form-check-label" for="option3">Add Substream only</label>
      </div>
    </div>
    <div class="form-group">
      <label for="tool_idea">Tool/Idea:</label>
      <input type="text" class="form-control" id="tool_idea" placeholder="Enter an Idea" required>
    </div>
    <div id="inputContainer">
      <div class="form-group">
        <label for="property">Property:</label>
        <input type="text" class="form-control" id="property" name="property" placeholder="Enter a property" required>
        <select class="form-select" hidden id="selected_property" name="selected" aria-label="Default select example">
        </select>
      </div>
      <div class="form-group">
        <label for="substream">Substream:</label>
        <input type="text" class="form-control" id="substream" name="substream" placeholder="Enter a substream" required>
        <select class="form-select" id="selected_substream" hidden name="selected" aria-label="Default select example">
        </select>
      </div>
      <div class="form-group">
        <label for="type">Type:</label>
        <input type="text" class="form-control" id="type" name="type" placeholder="type" required>
        <select class="form-select" hidden id="selected_type" name="selected" aria-label="Default select example">
        </select>
      </div>
      <div class="form-group">
        <label for="principle">Principle:</label>
        <input type="text" class="form-control" id="principle" name="principle" placeholder="principle" required>
        <select class="form-select" hidden id="selected_principle" name="selected" aria-label="Default select example">
        </select>
      </div>
    </div>
    <button id="submits" type="submit" hidden class="btn btn-primary mx-auto mt-3">Add Substream</button>
    <button id="submitsProp" type="submit" hidden class="btn btn-primary mx-auto mt-3">Add Property</button>
    <button id="submitsIdea" type="submit" class="btn btn-primary mx-auto mt-3">Add Idea</button>
  </form>
</div>

关键修复说明 #

1. 统一事件监听：用$("input[name='option']").on("change")替代单独绑定每个单选按钮的click事件，逻辑更集中，不易遗漏。
2. 强制状态重置：每次切换单选按钮时，先将所有输入框、下拉框、提交按钮恢复到初始状态，彻底避免之前的修改残留。
3. 用prop处理布尔属性：hidden、disabled属于布尔属性，jQuery中用prop()操作比attr()更可靠，能正确维护属性的布尔值状态。
4. 初始化触发：页面加载时自动触发当前选中项的逻辑，确保初始状态符合预期。

内容的提问来源于stack exchange，提问作者mouhamed amine akchouche