JavaScript通过单选按钮控制页面区块灰化时else语句不生效如何解决

云上老周

2026-10-7

问题根源

你遇到的else分支不生效的核心原因是：单选按钮的change事件仅在自身选中状态发生变更时触发。当你选中另外两个同name的单选按钮时，#PhasedRetirement虽然会自动取消选中，但它自身的change事件不会被触发，所以绑定在它身上的else分支逻辑永远不会执行。
另外代码中还有一处语法错误：$(guaranteedAnnuity).attr("disabled")仅会读取属性值，要设置禁用状态需要传入第二个参数，且针对表单布尔属性用prop操作比attr更稳妥。

修复方案

把所有逻辑统一收敛到input[name='retirementOptions']的change事件中处理即可，不需要分开绑定两个事件，修正后的完整代码如下：

$(document).ready(function() {
  const optionsBoxGuaranteeCheckbox = document.querySelector(".options-box--checkbox");
  const guaranteedAnnuity = document.getElementById("GuaranteedAnnuity");

  $("input[name='retirementOptions']").change(function() {
    // 直接判断阶段退休选项是否处于选中状态
    const isPhasedSelected = $("#PhasedRetirement").is(":checked");
    if (isPhasedSelected) {
      // 选中阶段退休：禁用目标单选框，区块置灰
      $(guaranteedAnnuity).prop("disabled", true);
      $(optionsBoxGuaranteeCheckbox).css({
        "opacity": ".7",
        "background-color": "#F3F5F7"
      }).addClass('options-box-unchecked');
    } else {
      // 选中其他选项：解除禁用，恢复区块样式
      $(guaranteedAnnuity).prop("disabled", false);
      $(optionsBoxGuaranteeCheckbox).css({
        "opacity": "1",
        "background-color": "transparent"
      }).removeClass('options-box-unchecked');
    }
  });
});