JavaScriptで複数の要素に色選択を可能にしたいです。

Question

前提・実現したいこと

リンク内容

リンク内容
HTML、CSS、JavaScriptで上の画像のような色選択機能を作成したいと思ってます。
1つの色を選択したら既に選択された色は選択出来ないようにし、複数の要素に色選択を可能にしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[1T2R3M4]

https://qiita.com/tactcom/questions/b854c8f10edc771d6a25

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const c=document.querySelectorAll('[name=color]');
  const p=document.querySelectorAll('[name=part]');
  c.forEach(x=>x.disabled=true);
  p.forEach(x=>{
    x.addEventListener('change',()=>{
      c.forEach(y=>y.disabled=(y.checked && y.dataset.part!=x.value));
    });
  });
  c.forEach(x=>{
    x.addEventListener('change',()=>{
      x.dataset.part=x.checked?[...p].filter(x=>x.checked)[0].value:"";
    });
  });
});
</script>
<h2>part</h2>
<label><input type="radio" name="part" value="1">1</label>
<label><input type="radio" name="part" value="2">2</label>
<label><input type="radio" name="part" value="3">3</label>
<label><input type="radio" name="part" value="4">4</label>
<h2>color</h2>
<label style="background-Color:red"><input type="checkbox" name="color" value="red">red</label>
<label style="background-Color:yellow"><input type="checkbox" name="color" value="yellow">yellow</label>
<label style="background-Color:lime"><input type="checkbox" name="color" value="lime">lime</label>
<label style="background-Color:aqua"><input type="checkbox" name="color" value="aqua">aqua</label>

Comments

[tacct]

ありがとうございます。