如何根据单选框状态动态启用/禁用按钮（JS/jQuery+PHP实现）

当然可以实现这个需求！不管是原生JavaScript还是jQuery都能轻松搞定，而且完全可以和PHP配合使用——PHP负责后端输出HTML结构，前端的交互逻辑交给JS/jQuery来处理就好。下面给你两种实用的实现方案：

方案一：原生JavaScript实现 #

先通过PHP输出基础的HTML结构（默认按钮处于禁用状态）：

<?php
// 这里可以添加你的PHP业务逻辑，比如动态生成单选框选项等
?>
<form>
  <div>
    <input type="radio" name="agreement" id="agreeYes" value="yes">
    <label for="agreeYes">我同意服务条款</label>
  </div>
  <div>
    <input type="radio" name="agreement" id="agreeNo" value="no">
    <label for="agreeNo">我不同意服务条款</label>
  </div>
  <button type="submit" id="submitBtn" disabled>提交申请</button>
</form>

<script>
// 获取同组的所有单选框和目标按钮
const radioGroup = document.querySelectorAll('input[name="agreement"]');
const submitBtn = document.getElementById('submitBtn');

// 给每个单选框绑定状态变化监听
radioGroup.forEach(radio => {
  radio.addEventListener('change', function() {
    // 检查当前是否有单选框被选中
    const hasCheckedItem = Array.from(radioGroup).some(item => item.checked);
    // 根据检查结果切换按钮的禁用状态
    submitBtn.disabled = !hasCheckedItem;
  });
});
</script>

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，代码会更简洁直观：

<?php
// 此处可添加PHP动态渲染逻辑
?>
<form>
  <div>
    <input type="radio" name="agreement" id="agreeYes" value="yes">
    <label for="agreeYes">我同意服务条款</label>
  </div>
  <div>
    <input type="radio" name="agreement" id="agreeNo" value="no">
    <label for="agreeNo">我不同意服务条款</label>
  </div>
  <button type="submit" id="submitBtn" disabled>提交申请</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 监听单选框组的状态变化
$('input[name="agreement"]').on('change', function() {
  // 判断是否有单选框被选中
  const isAnyChecked = $('input[name="agreement"]:checked').length > 0;
  // 切换按钮的禁用属性
  $('#submitBtn').prop('disabled', !isAnyChecked);
});
</script>

核心逻辑说明 #

• 初始状态下按钮设置disabled属性，用户无法点击。
• 当任意单选框的选中状态改变时，JS/jQuery会立即检查同组内是否有选中的选项。
• 若存在选中项，则移除按钮的disabled属性（启用按钮）；若所有单选框都未选中，则重新禁用按钮。

不管是PHP动态生成的单选框，还是静态编写的结构，这个逻辑都能完美适配联动需求~

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