单选按钮选中后自动勾选并锁定复选框的JS/JQuery实现方案

我来帮你搞定这个表单交互需求！这里分原生JavaScript和jQuery两种实现方式，你可以根据项目环境选合适的：

首先我们要获取对应的DOM元素，给单选按钮绑定change事件监听，核心逻辑就是根据选中的单选按钮状态来控制复选框：

• 选中b-option或c-option时，自动勾选复选框并禁用它（用户无法手动取消）
• 选中a-option时，恢复复选框的可操作权限，保留用户之前的勾选状态

// 获取所有单选按钮和目标复选框
const radioOptions = document.querySelectorAll('input[type="radio"][id^="option"]');
const optionalCheckbox = document.getElementById('optional');

// 给每个单选按钮绑定change事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.id === 'b-option' || this.id === 'c-option') {
      // 自动勾选并禁用复选框
      optionalCheckbox.checked = true;
      optionalCheckbox.disabled = true;
    } else if (this.id === 'a-option') {
      // 恢复复选框的可操作状态
      optionalCheckbox.disabled = false;
    }
  });
});

// 页面加载时初始化状态（如果默认选中b/c的话）
document.addEventListener('DOMContentLoaded', function() {
  const checkedRadio = document.querySelector('input[type="radio"][id^="option"]:checked');
  if (checkedRadio && (checkedRadio.id === 'b-option' || checkedRadio.id === 'c-option')) {
    optionalCheckbox.checked = true;
    optionalCheckbox.disabled = true;
  }
});

如果你的项目已经引入了jQuery，代码会更简洁直观，逻辑和原生JS一致：

// 给单选按钮绑定change事件
$('input[type="radio"][id^="option"]').on('change', function() {
  const $checkbox = $('#optional');
  if ($(this).is('#b-option, #c-option')) {
    // 链式操作：勾选 + 禁用
    $checkbox.prop('checked', true).prop('disabled', true);
  } else if ($(this).is('#a-option')) {
    // 恢复可操作状态
    $checkbox.prop('disabled', false);
  }
});

// 页面加载初始化状态
$(document).ready(function() {
  const $checkedRadio = $('input[type="radio"][id^="option"]:checked');
  if ($checkedRadio.is('#b-option, #c-option')) {
    $('#optional').prop('checked', true).prop('disabled', true);
  }
});

补充说明 #

• 禁用复选框后，用户无法手动取消勾选，完全符合需求；而选中a-option时，复选框回到正常可操作状态，用户可以手动勾选/取消
• 初始化代码很重要：如果页面加载时默认选中的是b-option或c-option，能确保复选框一开始就处于正确的状态，避免交互不一致

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