jQuery页面加载时检测单选框选中状态，移除按钮disabled类问题求助

你的问题出在触发所有单选框的change事件时，未选中的单选框会覆盖已选中单选框的操作。因为单选框组中同一时间只有一个选项被选中，当你调用$("input[type=radio]").trigger('change')时，所有单选框都会执行change事件处理函数：已选中的那个会移除disabled类，但随后未选中的单选框会触发事件，执行添加disabled类的逻辑，最终按钮的状态被最后执行的未选中单选框的操作覆盖，导致disabled类没被正确移除。

修正方案 #

我们需要调整逻辑：不再依赖当前触发事件的单选框状态，而是检查整个单选组是否有选中项，以此来控制按钮的disabled类。同时可以用toggleClass简化代码逻辑：

修正后的JS代码

// 页面初始化时先设置按钮的初始状态
const hasCheckedOwner = $('.selectOwner:checked').length > 0;
$("#situation").toggleClass('disabled', !hasCheckedOwner);

// 绑定单选框的change事件
$('.selectOwner').change(function() {
  const hasCheckedOwner = $('.selectOwner:checked').length > 0;
  // toggleClass的第二个参数：为true时添加类，false时移除类
  $("#situation").toggleClass('disabled', !hasCheckedOwner);
});

为什么这样能解决问题？ #

1. 初始化阶段：直接检查页面加载后是否有单选框被选中，手动设置按钮的状态，避免依赖事件触发的顺序问题。
2. 事件处理阶段：每次单选框状态变化时，都重新检查整个组的选中状态，确保按钮的状态始终和单选组的选中状态一致，不会被单个未选中的单选框事件覆盖。

可选简化写法

如果觉得初始化和事件处理的逻辑重复，可以把逻辑封装成一个函数：

function updateButtonState() {
  const hasCheckedOwner = $('.selectOwner:checked').length > 0;
  $("#situation").toggleClass('disabled', !hasCheckedOwner);
}

// 初始化调用
updateButtonState();

// 绑定事件
$('.selectOwner').change(updateButtonState);

这样代码更简洁，也方便后续维护。

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