web-dev-qa-db-fra.com

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

J'ai un formulaire dans lequel je souhaite désactiver ou masquer deux champs de saisie en cochant une case. Je peux facilement le faire sur document.ready, mais comme j'ajoute ces champs, la fonction ne prend pas effet. Comment appeler la fonction avec onClick?

Voici mon code de travail

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});
<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 j'essaie de faire:

function boxDisable(e) {
  $(this).click(function() {
    if ($(this).is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
  });
}
<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 utilise .ajouter pour créer multiple instances du code ci-dessus. Étant donné que la quantité d'ajout est illimitée, je ne peux pas définir la case à cocher avec $('#id'), car il pourrait y en avoir des centaines comme $('#id1'), $('#id2') .. etc. J'ai besoin d'une fonction qui évite de mentionner les identifiants exacts des éléments, s'appelle onClick par la case à cocher et affecte le div avant-tête, qui est aussi ajouté.

javascriptjquerycheckboxonclick
9
Ra Tre

Ça marche :)

function boxDisable(e, t) {
    if (t.is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
}
<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" />
10
Maxim Mazurok

Si les éléments n'existent pas au moment de la préparation du document, utilisez .on, ainsi:

$(document).ready(function(){
    $(document).on('change', 'input[type="checkbox"]', function(e){
        //do your stuff here
    });

});

documentation jQuery .on

4
Ted

N'utilisez pas l'attribut onclick. Ce que fait votre code, c'est d'attacher un nouveau gestionnaire onclick après que l'utilisateur a cliqué. Ce n'est probablement pas ce que vous voulez.

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

Étant donné que l'élément auquel vous souhaitez attacher votre événement peut ne pas exister sur le document prêt, attachez-le à l'ancêtre le plus proche que vous êtes sûr d'être là.

$( 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
  } );
} );
3
error
$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});
<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" />
1
Sunil kumar