disable select for certain input

Question

I want to disable a select attribute when my type = radio input is checked. Here's the part of the code i'm talking about:

<input id="societeInterne" name="radioSociete" type="radio" value="Interne"/><label>Interne / </label>
<input id="societeExterne" name="radioSociete" type="radio" value="Externe"/><label>Externe - </label>
<label for="PrestataireStit"> Préciser le STIT </label>
   <ol>
    <li style="list-style-type: disc">
       <select id="selectPresta">
        <option value='GROUPE presta' name='Societe presta'>presta</option>
            <option value='GROUPE presta' name='Societe presta'>presta</option>
        <option value='GROUPE presta' name='Societe presta'>presta</option>
       </select>
    </li>
   </ol>

What I want is that when the input "societeExterne" isn't selected, the select "selectPresta" be disabled. I tried with different types of function in javascript but none of them worked:

var radioExterne = document.getElementById('societeExterne');
var radioInterne = document.getElementById('societeInterne');
var selectPresta = document.getElementById('selectPresta');


if (radioExterne.checked) {
    selectPresta.disabled = false;
} else {
    selectPresta.disabled = true;
}

---

var radioExterne = document.getElementById('societeExterne');
var radioInterne = document.getElementById('societeInterne');
var selectPresta = document.getElementById('selectPresta');

radioExterne.addEventListener(
  "change",
  (event) => {
    selectPresta.disabled = !event.target.checked;
  },
  false,
);

Answer 1

You can do it if you wrap your content in a form element, then you can listen for a change of the form and toggle selectPresta.disabled accordingly:

var form = document.getElementById('myform');
var radioExterne = document.getElementById('societeExterne');
var selectPresta = document.getElementById('selectPresta');
//listen for a change in the form
form.addEventListener("change", (event) => {
    //does the value of form.radioSociete not match that of radioExterne?
    selectPresta.disabled = !(form.radioSociete.value == radioExterne.value);
});
//trigger change on load to set initial state
form.dispatchEvent(new Event("change"));

<form id="myform">
  <label><input id="societeInterne" name="radioSociete" type="radio" value="Interne" />Interne / </label>
  <label><input id="societeExterne" name="radioSociete" type="radio" value="Externe" />Externe - </label>
  <label for="PrestataireStit"> Préciser le STIT </label>
  <ol>
    <li style="list-style-type: disc">
      <select id="selectPresta">
        <option value='GROUPE presta' name='Societe presta'>presta</option>
        <option value='GROUPE presta' name='Societe presta'>presta</option>
        <option value='GROUPE presta' name='Societe presta'>presta</option>
      </select>
    </li>
  </ol>
</form>

Answer 2

Add this to your script tag

    //set element to be disabled by default
    const selectElement = document.getElementById('selectPresta');

    function enableSelectElement() {
        var selectedRadio = document.querySelector('input[type="radio"]:checked').id;
        //set element to be enabled/disabled by calling function
        selectElement.disabled = selectedRadio !== 'societeExterne';
    };