J'ai besoin que l'entrée «date» soit désactivée jusqu'à ce que l'option «Date limite» soit sélectionnée. J'ai essayé ce qui suit mais cela ne fonctionne pas. Aucune suggestion?

CODE

<Select>
  <option onselect="document.getElementById('deadline').disabled = false;">Deadline date</option>
  <option>Monthly</option>
</Select>

<input id="deadline" type="date" disabled>
0
Junaid Khan 17 avril 2018 à 12:57

3 réponses

Meilleure réponse

Cela devrait:

function validate() {

  var dropdown = document.getElementById('dropdown');
  var selectedOption = dropdown.options[dropdown.selectedIndex].value;
  
  var input = document.getElementById('date');
  
  if (selectedOption == "enabled") {
    input.removeAttribute('disabled');
  } else {
    input.setAttribute('disabled', 'disabled');
  }
}
<select id="dropdown" onchange="validate()">
  <option value="disabled">Pick something</option>
  <option value="enabled">Deadline date</option>
  <option value="disabled">Monthly</option>
</select>

<input type="date" id="date" disabled="disabled">
0
CodeF0x 17 avril 2018 à 10:09

Lors de la dropdown modification de l'événement, vous pouvez ajouter ou supprimer attribute comme ceci avec votre condition de correspondance.

$("select").change(function() {
  if ($(this).val() == 'Deadline date')
    $('#inpTest').removeAttr('disabled');
  else
    $('#inpTest').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select>
 <option>---select---</option>
  <option>Deadline date</option>
  <option>Monthly</option>
</Select>

<input type="date" disabled="disabled" id='inpTest'>
0
Shree 17 avril 2018 à 10:08

Vous devrez associer un gestionnaire d'événements à l'événement change de votre sélection, puis vérifier sa valeur avec this.value.

Enfin, définissez l'attribut disabled de votre entrée sur true ou false en conséquence.

document.getElementsByTagName('select')[0].onchange = function() {
  document.getElementById('deadline').disabled = this.value != 'Deadline date';
}
<select>
  <option>Deadline date</option>
  <option>Monthly</option>
</select>

<input id="deadline" type="date" disabled>
0
Zenoo 17 avril 2018 à 10:07