J'ai une case à cocher et un champ. Par défaut, le champ doit être désactivé. Dès que la case est cochée, le champ doit être activé.

J'ai essayé littéralement toutes les réponses ici mais sans succès. J'ai essayé css uniquement mais j'ai échoué là aussi. Quand j'essaie certains des échantillons au violon ou partout où ils fonctionnent, mais pas dans mon projet.

Ce que j'ai actuellement est un simple test que lorsque je clique sur quoi que ce soit avec #clicker, le champ désactive / active. Cela fonctionne parfaitement. Je connais donc mon travail JavaScript, donc je n'ai besoin d'aucune bibliothèque supplémentaire. Maintenant, j'ai juste besoin d'ajuster mon code pour qu'il fonctionne quand une case est cochée ou non.

Voilà ce que j'ai;

<script type="text/javascript">
$().ready(function() {
    $('#clicker').click(function() {
        $('#form_secondApprover').each(function() {
            if ($(this).attr('disabled')) {
                $(this).removeAttr('disabled');
            }
            else {
                $(this).attr({
                    'disabled': 'disabled'
                });
            }
        });
    });
});
4
Mentos93 8 août 2016 à 13:05

4 réponses

Meilleure réponse

Voici une solution javaScript pure pour votre réponse !!

document.addEventListener("DOMContentLoaded", function(event) {
    var checkbox = document.getElementById('clicker');
    var inputs = document.querySelectorAll('input[type=text]');
    checkbox.addEventListener('change', function(event) {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].disabled = !checkbox.checked;
        }
    });
});
input[type="text"]:disabled {
  cursor: not-allowed;
}
<input type="checkbox" id="clicker" />
<label for="clicker">Click Me, I'll disable/enable these text boxes</label>

<form id="form_secondApprover">
  <input type="text" disabled/>
  <input type="text" disabled/>
  <input type="text" disabled/>
</form>

Voici le FIDDLE si vous voulez jouer avec :)

2
Jinu Kurian 9 août 2016 à 06:18

Essaye ça

JS:

document.getElementById("clicker").addEventListener("change",function(event){
     if(event.target.checked)
        document.getElementById("field").removeAttribute("disabled");
     else
        document.getElementById("field").setAttribute("disabled","disabled");
});

HTML:

 <input type="checkbox" id="clicker" />
 <input type="text" id="field" disabled>
0
Sabith 8 août 2016 à 10:18

Violon de travail avec formulaire

Attachez l'événement change() à la case à cocher, puis basculez l'attribut disabled, consultez l'exemple ci-dessous.

REMARQUE: Les champs avec disabled ne seront pas soumis, si vous souhaitez soumettre également ceux désactivés, utilisez readonly à la place.

J'espère que cela t'aides.


Version d'extrait simple

$().ready(function() {
  $('#checkbox').on('change', function() {
    if ($('#field').attr('disabled')) {
      $('#field').removeAttr('disabled');
    }else {
      $('#field').attr({'disabled': 'disabled'});
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name="checkbox1" id="checkbox" />Enable
<br>
<input type='text' name="text1" id="field" disabled/>
0
Zakaria Acharki 8 août 2016 à 10:19

Vous pouvez utiliser les propriétés jQuery .disabled et .checked.

Vouliez-vous dire quelque chose comme ça? https://jsfiddle.net/9rn9L1r9/1/

0
Guy Waldman 8 août 2016 à 10:20