each option in select tag disable a specific element in page

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

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>