使用jQuery控制复选框状态：页面加载时逻辑不生效问题

问题出在你用attr()和removeAttr()操作disabled属性——对于复选框这类表单元素的布尔型DOM属性（比如disabled、checked），jQuery官方推荐使用prop()方法来控制，而非attr()。attr()仅用于操作HTML标签上的属性，而prop()才是操作DOM对象的属性状态，页面加载时用attr()无法正确同步DOM的禁用状态。

另外你的change事件里还有个小错误：e.preventDefault只是引用了函数，没有调用，应该写成e.preventDefault()（不过这里复选框的change事件其实不需要阻止默认行为，可以直接删掉这行）。

修正后的完整代码 #

(function( $ ) {
    'use strict';

    $( document ).ready(function() {
        // 页面加载时初始化状态
        const isSuspendedChecked = $('input[name="suspended"]').is(':checked');
        console.log(isSuspendedChecked ? "Suspended is checked" : "Suspended is unchecked");
        
        // 用prop()设置disabled状态
        $('input[name="option1"], input[name="option2"]').prop("disabled", isSuspendedChecked);

        // 绑定change事件
        $('input[name="suspended"]').change( function() {
            const checked = $(this).is(':checked');
            $('input[name="option1"], input[name="option2"]').prop("disabled", checked);
        });
    });

})( jQuery );

关键改动说明 #

• 统一用prop("disabled", 布尔值)来设置禁用状态，替代attr()和removeAttr()，确保DOM状态与视觉表现一致。
• 合并了option1和option2的选择器，简化代码结构。
• 移除了不必要的e.preventDefault()（复选框的change事件不需要阻止默认行为）。
• 提取重复逻辑到变量，提升代码可读性和可维护性。

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