title: How to disable some of the checkboxes based on checked radio button?
body: <p>As the title says, I want to disable some of the checkboxes based on the checked radio button.</p>
  <p>For example, I click the first radio button <code>id=&quot;pz1&quot;</code> and then it disables the checkboxes which <code>id</code> is the same as listed in <code>thisToppings</code> array. Every radio button has its respective checkboxes to be disabled.</p>
  <p>So far, I can only disable the first four checkboxes out of six in the first radio button. While the other radio button, the checkboxes disabling function doesn't work at all. And every time I clicked any of the radio buttons it will give an error that <code>id</code> in <code>xxToppings[i].id</code> is undefined.</p>
  <p>I want to complete this in vanilla Javascript, any help is appreciated. Thanks.</p>
  <p><strong>script.js</strong></p>
  <pre><code>const pzPrice = form.elements.pz;
  const toppingsPrice = form.elements.topping;
  
      pzPrice[0].onclick = () =&gt; {
      const thisToppings = [
          { id: &quot;tp0&quot; },
          { id: &quot;tp1&quot; },
          { id: &quot;tp2&quot; },
          { id: &quot;tp3&quot; },
          { id: &quot;tp7&quot; },
          { id: &quot;tp10&quot; }
      ];
  
      for (let i = 0; i &lt; toppingsPrice.length; i++) {
          if (toppingsPrice[i].id === thisToppings[i].id) {
              toppingsPrice[i].disabled = true;
          } else toppingsPrice[i].disabled = false;
      }
  };
  
  pzPrice[1].onclick = () =&gt; {
      const thisOtherToppings = [
          { id: &quot;tp1&quot; },
          { id: &quot;tp2&quot; },
          { id: &quot;tp3&quot; },
          { id: &quot;tp4&quot; },
          { id: &quot;tp5&quot; },
          { id: &quot;tp6&quot; },
          { id: &quot;tp8&quot; },
          { id: &quot;tp10&quot; }
      ]
  
      for (let i = 0; i &lt; toppingsPrice.length; i++) {
          if (toppingsPrice[i].id === thisOtherToppings[i].id) {
              toppingsPrice[i].disabled = true;
          } else toppingsPrice[i].disabled = false;
      }
  };
  
  pzPrice[2].onclick = () =&gt; {
      const theOtherToppings = [
          { id: &quot;tp1&quot; },
          { id: &quot;tp2&quot; },
          { id: &quot;tp3&quot; },
          { id: &quot;tp7&quot; },
          { id: &quot;tp8&quot; },
          { id: &quot;tp9&quot; },
          { id: &quot;tp10&quot; },
          { id: &quot;tp11&quot; }
      ]
  
      for (let i = 0; i &lt; toppingsPrice.length; i++) {
          if (toppingsPrice[i].id == theOtherToppings[i].id) {
              toppingsPrice[i].disabled = true;
          } else toppingsPrice[i].disabled = false;
      }
  };
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;form name=&quot;demo&quot;&gt;
  &lt;section class=&quot;radio&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;input type=&quot;radio&quot; id=&quot;pz1&quot; name=&quot;pz&quot; value=8&gt;
              &lt;/div&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;input type=&quot;radio&quot; id=&quot;pz2&quot; name=&quot;pz&quot; value=10&gt;
              &lt;/div&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;input type=&quot;radio&quot; id=&quot;pz3&quot; name=&quot;pz&quot; value=12&gt;
              &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class=&quot;choices&quot;&gt;
              &lt;div class=&quot;veggies&quot;&gt;
                  &lt;div class=&quot;input&quot;&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp0&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp1&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp2&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp3&quot; name=&quot;topping&quot; value=1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;seafood&quot;&gt;
                  &lt;div class=&quot;input&quot;&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp4&quot; name=&quot;topping&quot; value=2&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp5&quot; name=&quot;topping&quot; value=2&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp6&quot; name=&quot;topping&quot; value=2&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp7&quot; name=&quot;topping&quot; value=2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;meat&quot;&gt;
                  &lt;div class=&quot;input&quot;&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp8&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp9&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp10&quot; name=&quot;topping&quot; value=1&gt;
                      &lt;input type=&quot;checkbox&quot; id=&quot;tp11&quot; name=&quot;topping&quot; value=1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  &lt;/form&gt;
  </code></pre>