如何实现点击一个元素后，其他同类元素无法再次点击？

有四个评价选项，当用户单击其中一个评价并添加“on”类后，其他评价选项应该变为不可点击，并提示用户已经评价。

解决方法：

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

在 ul 标签上添加一个 id：

• 评价 1
• 评价 2
• 评价 3
• 评价 4

然后，使用 javascript 遍历 li 标签，并在单击事件中检查是否存在具有“on”类的 li：

const evaluations = document.getElementById('evaluations');

evaluations.addEventListener('click', (event) => {
  const currentLi = event.target;
  
  // 检查是否存在具有 "on" 类的 li
  const onLi = Array.from(evaluations.children).find((li) => li.classList.contains('on'));
  
  // 如果存在，提示用户已评价
  if (onLi) {
    alert('您已评价！');
    return;
  }
  
  // 否则，添加 "on" 类并禁用其他 li
  currentLi.classList.add('on');
  Array.from(evaluations.children).forEach((li) => {
    if (li !== currentLi) {
      li.classList.add('disabled');
    }
  });
});