如何实现同名字段实时条件提交 选中单选按钮仅提交对应字段

实现方案 #

利用浏览器不提交disabled属性表单元素的特性，用JS监听单选框切换事件，动态修改对应输入框的禁用状态即可，无需后端提前判断。

完整代码示例 #

<input type="radio" name="radio" value="first" checked>
<input type="radio" name="radio" value="second">

<!-- 给两个输入框加id方便定位，初始禁用未选中对应输入框 -->
<input type="text" name="target" id="targetFirst" value="this item when radio=first is checked">
<input type="text" name="target" id="targetSecond" value="this item when radio=second is checked" disabled>

<script>
// 绑定单选框切换事件
document.querySelectorAll('input[name="radio"]').forEach(item => {
  item.addEventListener('change', function() {
    const checkFirst = this.value === 'first'
    document.getElementById('targetFirst').disabled = !checkFirst
    document.getElementById('targetSecond').disabled = checkFirst
  })
})
</script>

补充说明 #

• 初始状态下要给默认选中的单选对应的输入框开启可用，另一个设为禁用，避免首次提交数据错误
• 提交后后端$_POST['target']会直接拿到选中单选对应的值，原有基于radio值的判断逻辑可以直接删除

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