Question 282246 in Html Question posted in
Some basic documentation can be found here.

Html – disable select for certain input

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,
);
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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
        if (selectedRadio === 'societeExterne') {
            selectElement.disabled = false;
        } else {
            selectElement.disabled = true;
        }
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search