如何将未勾选的Checkbox置灰？（添加/移除grey类实现）

没问题，我帮你调整代码来实现这个需求——核心是通过添加/移除grey类来控制样式，而非禁用复选框。下面是修改后的完整代码，同时修复了HTML结构里的错误：

HTML 结构 #

首先修正原HTML里多余的<td>标签，保证结构合法：

<ul> 
    <li>
        <input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1 
    </li> 
    <li>
        <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2 
    </li> 
    <li>
        <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3 
    </li> 
    <li>
        <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4 
    </li> 
</ul>

CSS 样式 #

保留你提供的样式，可额外添加cursor属性增强交互提示（可选）：

input[type="checkbox"] { 
    opacity: 1;
    cursor: pointer;
} 
input[type="checkbox"].grey { 
    opacity: 0.5;
    cursor: not-allowed;
}

JavaScript 逻辑 #

重写ckChange函数，实现“勾选一个时其余未勾选项置灰，切换勾选目标时自动更新样式”的效果：

function ckChange(ckType) { 
    const checkboxes = document.getElementsByName(ckType.name); 
    
    if (ckType.checked) { 
        // 取消其他复选框的勾选状态（模拟单选行为）
        checkboxes.forEach(ck => {
            if (ck !== ckType) ck.checked = false;
        });
        // 给未勾选的复选框添加grey类，已勾选的移除
        checkboxes.forEach(ck => {
            ck.classList.toggle('grey', !ck.checked);
        });
    } else { 
        // 取消当前勾选时，移除所有复选框的grey类
        checkboxes.forEach(ck => {
            ck.classList.remove('grey');
        });
    } 
}

代码说明： #

• 当勾选某个复选框时，先自动取消其他同组复选框的勾选（保持单选逻辑，符合你原代码的意图）；
• 使用classList.toggle简化类的添加/移除：当复选框未勾选时添加grey类，反之移除；
• 取消当前复选框的勾选时，所有复选框恢复正常样式。

如果需要支持多选（即允许同时勾选多个，仅未勾选的项置灰），可以去掉“取消其他复选框勾选”的逻辑，修改后的JS如下：

function ckChange(ckType) { 
    const checkboxes = document.getElementsByName(ckType.name); 
    // 获取当前已勾选的复选框数量
    const checkedCount = [...checkboxes].filter(ck => ck.checked).length;
    
    // 如果有至少一个勾选项，给未勾选的加grey类；否则移除所有grey类
    checkboxes.forEach(ck => {
        if (checkedCount > 0) {
            ck.classList.toggle('grey', !ck.checked);
        } else {
            ck.classList.remove('grey');
        }
    });
}

这个版本会在有复选框被勾选时，把所有未勾选的项置灰；当所有勾选都被取消时，恢复所有项的正常样式。

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