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

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

解决方法：

在 ul 标签上添加一个 id：

<ul id="evaluations">
  <li>评价 1</li>
  <li>评价 2</li>
  <li>评价 3</li>
  <li>评价 4</li>
</ul>

然后，使用 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');
    }
  });
});

以上就是如何只允许用户单击一次评价选项，并阻止其他选项被点击？的详细内容，更多请关注php中文网其它相关文章！