Comment appeler une fonction à partir de la case onclick ou onchange

J'ai un formulaire dans lequel je veux désactiver ou masquer des deux champs de saisie en sélectionnant une case à cocher. Je peux facilement le faire quand sur le document.prêt, mais depuis que je suis en ajoutant les champs de la fonction ne prend pas effet. Comment dois-je appeler la fonction avec onClick?

Voici mon code de travail

JS:

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />

Et c'est ce que je suis en train de faire:

JS:

function boxDisable(e) {
  $(this).click(function() {
    if ($(this).is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
  });
}

HTML:

<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />

---EDIT---------------
Permettez-moi de redéfinir: Mon code est à l'aide .ajouter pour créer plusieurs instances du code ci-dessus. Puisque la quantité de append est illimité, je suis incapable de définir la case avec $('#id'), car il peut y avoir des centaines d'entre eux comme $('#id1'), $('#id2').. etc. J'ai besoin d'une fonction qui évite de mentionner l'exacte id de l'élément, est appelé onClick par le case et affectant beforehead div, qui est aussi ajouté.

Je suis assez confus sur ce que vous essayez de faire ici, le var appTimes n'est pas défini... peut-être vous dire onclick="boxdisable('.appTimes');"?
pas besoin de si/d'autre, vous utilisez prop pour définir et unset désactivé, pas attr/removeAttr, qui prend une valeur de type boolean $(e).find('input').prop('disabled', $something.is(':checked'));

InformationsquelleAutor Ra Tre | 2015-02-06

10

Il fonctionne 🙂

JS:
```
function boxDisable(e, t) {
    if (t.is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />
```
- Oui, mais je suis ajout ce qui signifie ne pouvez pas utiliser $('input#chekcbox') et j'ai besoin d'utiliser $(ce)
- Découvrez ma réponse maintenant, j'ai le modifier.
- Cela fonctionne! Je ne savais pas, je peux mettre $(this) avec le onclick appel. Merci
- pas du tout 🙂
- Avez-vous une idée de pourquoi ça marche sur cet extrait de code, mais pas sur JSFiddle?
- lorsque le script est en cours d'exécution, jQuery n'est pas encore chargé. C'est l'une des solutions: jsfiddle.net/maxim_mazurok/6ynu4mtc
- Vous ne devriez pas utiliser attr et removeAttr pour cela, vous devez utiliser prop. $(e).find('input').prop('disabled', t.is(':checked'));
- je vous remercie. Maxim cela ne fonctionne toujours pas sur mon code. Pensez-vous qu'il pourrait avoir quelque chose à faire avec .append()? - Je copier et coller le code 1:1 et il ne semble pas le prendre tout effet
- eh bien, montrez-moi votre jsfiddle. Utilisez-vous append('$code') ou append("$code")
- Nice! Comment fonctionne t.est() la méthode de travail? pouvez-vous nous en dire plus?
- il vérifie si l'élément correspond sélecteur passé comme un paramètre est fonction de (), ou pas. Donc, si vous sélectionnez l'élément div et courir $(elem).est('div') il retournera true.
InformationsquelleAutor Maxim Mazurok
4

Si les éléments n'existent pas au moment de la doc prêt, utilisez .on, comme suit:
```
$(document).ready(function(){
    $(document).on('change', 'input[type="checkbox"]', function(e){
        //do your stuff here
    });

});
```
jQuery .sur la documentation
- Comment définiriez-vous de la case depuis que je suis à l'ajout et j'ai la possibilité d'ajouter plus d'un et tous ont la même fonctionnalité. J'ai besoin d'une fonction pour faire le travail et d'utiliser $(this) pour définir la case
- $e.cible) devraient vous permettre de cocher la case qui a changé et a déclenché l'événement. Ce code met l'auditeur dans le document, de sorte que toutes les cases ajoutée au document après la doc sera encore le cas de la bulle et le feu de votre code.
- Vous faire comprendre, que .append() prend place après doc prêt, droit?
- Oui, l'utilisation de .sur, lié au document, vous permet, en effet, lier les événements à des choses qui n'existent pas encore.
InformationsquelleAutor Ted
3

De ne pas utiliser le onclick attribut. Ce que votre code est en train de faire est de connecter un nouveau gestionnaire onclick une fois que l'utilisateur clique. Ce n'est probablement pas ce que vous voulez.

Vous devez également utiliser prop au lieu de attr pour changer disabled.

Depuis l'élément que vous souhaitez joindre votre événement peut ne pas exister sur le document de prêt, l'attacher à l'ancêtre le plus proche que vous êtes sûr qu'on y sera.
```
$( function() { //wait for document ready
  $( '#parent-div' ).on( 'click', ':checkbox', function( e ) { //attach click event
      $( '#appTimes' ).find(':text').prop( 'disabled', $(e.currentTarget).is(':checked') ); //set disabled prop equal to checked property of checkbox
  } );
} );
```
- Vraiment de bons points. Mais cela ne résout pas son problème de logique.
- Qu'est-ce que la "logique"du problème?
- Juste assez, j'ai ajouté un alinéa supplémentaire pour cela.
- Je suis en train de éviter en attente pour le document de prêt et de l'élément d'identifiant. Je veux utiliser $(this) pour la case à cocher et une variable pour la div avec, contenant les entrées
- Vous pouvez joindre à l'événement pour quelque chose de plus élevé dans les DOM si l'élément n'existe pas prêt à temps.
- hes dire que les entrées sont ajoutées dans le code. Donc, une fois ajoutée, si la case n'est pas cochée, ces entrées de rester activée. Il veut être désactivée en ce moment. but since i am appending those fields the function does not take effect -> c'est parce Que la case, cliquez sur l'événement n'est pas appelé à les ajouter.
- C'est une bien meilleure réponse que l'on a accepté la réponse.
InformationsquelleAutor error

JS:

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />

InformationsquelleAutor Sunil kumar

Vous devez vous connecter pour publier un commentaire.