Garder l'entrée désactivée jusqu'à ce que l'option correcte soit sélectionnée en html

Question

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>

javascript jquery html

0

Junaid Khan 17 avril 2018 à 12:57

Answer 1

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

Answer 2

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

Answer 3

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

Garder l'entrée désactivée jusqu'à ce que l'option correcte soit sélectionnée en html

3 réponses

De nouvelles questions