each option in select tag disable a specific element in page

Issue

I'm trying to implement a form in which you choose a shape from a select tag and it calculates the area and perimeter. I just want when I select the Square option from the select, radius input disabled like the image.

Please do not use JQuery

Please do not use JQuery

Please do not use JQuery

here is my form please help me with .js file

<div class="container">
    <hr class="lighter">
    <label for="shapes">Shapes :</label>
    <select name="shapes" id="shapes">
        <option value="rectangle">Rectangle</option>
        <option value="square">Square</option>
        <option value="circle">Circle</option>
        <option value="cylindrical">Cylindrical</option>
    </select>
    <br><br>
    <lable for="radius">Radius : </lable>
    <input type="number" id="radius" disabled><br>
    <lable for="shapeWidth">Widht : </lable>
    <input type="number" id="shapeWidth"><br>
    <lable for="shapeHeight">Height :</lable>
    <input type="number" id="shapeHeight">
    <hr>
    <label for="area" id="area_result">Area :</label>
    <label for="area_result"></label>
    <br>
    <label for="primiter" id="primiter_result">Primiter :</label>
    <label for="primiter_result"></label>
</div>

Solution

const eleId = document.getElementById("shapes");
const radiusId = document.getElementById("radius");
eleId.addEventListener(
  "change",
  function () {
    if (this.value === "square") {
      radiusId.disabled = true;
    } else {
      radiusId.disabled = false;
    }
  },
)

<div class="container">
  <hr class="lighter" />
  <label for="shapes">Shapes :</label>
  <select name="shapes" id="shapes">
    <option value="rectangle">Rectangle</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
    <option value="cylindrical">Cylindrical</option>
  </select>
  <br /><br />
  <lable for="radius">Radius : </lable>
  <input type="number" id="radius" /><br />
  <lable for="shapeWidth">Widht : </lable>
  <input type="number" id="shapeWidth" /><br />
  <lable for="shapeHeight">Height :</lable>
  <input type="number" id="shapeHeight" />
  <hr />
  <label for="area" id="area_result">Area :</label>
  <label for="area_result"></label>
  <br />
  <label for="primiter" id="primiter_result">Primiter :</label>
  <label for="primiter_result"></label>
</div>

Answered By - Ahmad Faraz