基于原生JavaScript DOM动态设置复选框状态的实现求助

需求说明 #

• 读取所有class为peter的隐藏输入框值，对应设置class为user_roles的复选框状态
• 规则：
  • 隐藏框值为1：复选框勾选且禁用（灰色，不可修改）
  • 隐藏框值为0：复选框可正常勾选/取消
  • 隐藏框值为2：复选框可切换状态，需显示黄色样式（临时角色）
• 附加说明：黄色代表临时角色，灰色代表永久角色

原始HTML代码 #

<input class="user_roles" type="checkbox" id="Administrator" />
<input class="user_roles" type="checkbox" id="Installer" /> 
<input class="user_roles" type="checkbox" id="Starter" />

<input type="hidden" class="peter" id="peter_Administrator" value="1" />
<input type="hidden" class="peter" id="peter_Installer" value="0" /> 
<input type="hidden" class="peter" id="peter_Starter" value="2" />

实现代码 #

第一步：添加CSS样式 #

先定义黄色复选框的样式，放在页面的<style>标签中：

/* 临时角色（黄色）复选框样式 */
.user_roles.temporary {
  accent-color: #ffcc00; /* 现代浏览器直接设置复选框颜色 */
}
/* 禁用状态的复选框浏览器默认显示灰色，无需额外设置 */

第二步：编写原生JavaScript函数 #

// 页面加载完成后执行，避免DOM元素未生成时操作
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有隐藏输入框
  const hiddenInputs = document.querySelectorAll('.peter');
  
  // 遍历每个隐藏框处理对应复选框
  hiddenInputs.forEach(function(hiddenInput) {
    // 从隐藏框ID提取对应复选框ID（去掉前缀peter_）
    const checkboxId = hiddenInput.id.replace('peter_', '');
    // 获取目标复选框元素
    const checkbox = document.getElementById(checkboxId);
    
    // 若找不到对应复选框则跳过，避免报错
    if (!checkbox) return;
    
    // 把隐藏框的值转为数字，方便判断
    const roleValue = parseInt(hiddenInput.value);
    
    // 根据值设置复选框状态
    switch(roleValue) {
      case 1:
        checkbox.checked = true;
        checkbox.disabled = true;
        break;
      case 0:
        checkbox.disabled = false;
        // 如需默认不勾选可添加：checkbox.checked = false;
        break;
      case 2:
        checkbox.disabled = false;
        checkbox.classList.add('temporary');
        // 如需默认勾选可添加：checkbox.checked = true;
        break;
      default:
        checkbox.disabled = false;
        break;
    }
  });
});

代码说明 #

• DOMContentLoaded事件确保页面元素全部加载后再执行JS，避免出现找不到元素的错误
• 通过ID前缀匹配隐藏框和对应复选框，保证两者一一对应
• 用parseInt将隐藏框的字符串值转为数字，便于条件判断
• 利用classList.add添加样式类，实现黄色复选框效果
• 禁用状态的复选框浏览器会自动显示灰色，无需额外编写样式

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