So rufen Sie eine Funktion aus der checkbox onclick oder onchange

Ich habe ein Formular, in dem möchte ich deaktivieren oder verstecken sich zwei Eingabefelder durch Auswahl einer checkbox. Kann ich leicht tun, wenn Sie auf Dokument.fertig, aber da ich mich Anhängen dieser Felder ist die Funktion nicht wirksam. Wie rufe ich die Funktion mit onClick?

Hier mein funktionierenden code

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" />

Und das ist, was ich versuche zu tun:

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---------------
Lassen Sie mich neu zu definieren: Mein code verwendet wird .append zu erstellen mehrere Instanzen der oben genannten code. Da die Menge von Anhängen ist unbegrenzt ich bin nicht in der Lage zu definieren, die checkbox mit $('#id'), weil es möglicherweise Hunderte von Ihnen, wie $('#id1'), $('#id2').. etc. Ich brauche eine Funktion, die verhindert, dass die Erwähnung der genauen element-id ' s, genannt onClick durch die checkbox und die vorkopf div, die auch angehängt.

Ich bin ziemlich verwirrt über das, was Sie hier versuchen, die var appTimes ist nicht definiert... Vielleicht meinst du onclick="boxdisable('.appTimes');"?
keine Notwendigkeit für if/else-Anweisung, die Sie verwenden prop zu setzen und "unset" deaktiviert, nicht attr/removeAttr, die einen booleschen $(e).find('input').prop('disabled', $something.is(':checked'));

InformationsquelleAutor Ra Tre | 2015-02-06

10

Es funktioniert 🙂

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" />
```
- Ja, aber ich bin Anhängen das bedeutet nicht verwenden können $('input#chekcbox") und ich $(this)
- Schauen Sie sich meine Antwort jetzt hab ich es Bearbeiten.
- Dieser funktioniert! Ich wusste nicht, ich kann $(this) mit dem onclick-Aufruf. Danke
- überhaupt nicht 🙂
- Haben Sie eine Idee, warum es funktioniert auf diese snippet, aber nicht auf JSFiddle?
- wenn das Skript ausgeführt wird, jQuery noch nicht geladen ist. Es ist eine der Lösungen: jsfiddle.net/maxim_mazurok/6ynu4mtc
- Sie sollten nicht attr und removeAttr für diese, sollten Sie prop. $(e).find('input').prop('disabled', t.is(':checked'));
- danke. Maxim funktioniert es immer noch nicht auf meinen code. Denkst du es könnte etwas damit zu tun haben .append()? Ich kopieren und einfügen den code 1:1 und es scheint nicht zu nehmen, keine Wirkung
- gut, zeig mir dein jsfiddle. Verwenden Sie append('$code') oder append("$code")
- Schön! Wie funktioniert die t -.ist () - Methode arbeiten? können Sie uns mehr erzählen?
- es prüft, ob element entspricht Selektor als parameter übergeben wird () - Funktion, oder nicht. Also, wenn Sie die select-div-element und führen Sie $(elem).ist('div') es wird true zurückgegeben.
InformationsquelleAutor Maxim Mazurok
4

Wenn die Elemente nicht vorhanden sind die zum Zeitpunkt der doc sich bereit, die Verwendung .on etwa so:
```
$(document).ready(function(){
    $(document).on('change', 'input[type="checkbox"]', function(e){
        //do your stuff here
    });

});
```
jQuery .auf die Dokumentation
- Wie definieren Sie das Kontrollkästchen aktivieren, da ich anfügen, und ich habe die Möglichkeit zum Anhängen von mehr als einem und alle von Ihnen haben die gleiche Funktionalität. Ich brauche eine Funktion, um den job tun, und verwenden Sie $(this) definieren Sie die checkbox
- $e.Ziel) soll Sie das Kontrollkästchen, das hat sich geändert und feuerte die Veranstaltung. Dieser code setzt den Hörer auf das Dokument, damit alle Checkboxen Hinzugefügt, um das Dokument nach doc ready wird immer noch die Veranstaltung, sprudeln und Feuer code.
- Sie verstehen, dass .append() erfolgt nach doc fertig, richtig?
- Ja, die Verwendung von .auf, an das Dokument, können Sie in der Tat, binden, Veranstaltungen zu den Dingen, die noch nicht existieren.
InformationsquelleAutor Ted
3

Nicht die onclick Attribut. Was Ihr code macht, ist das anbringen einer neuen onclick-handler nachdem der Benutzer klickt. Das ist wahrscheinlich nicht das, was Sie wollen.

Sollten Sie auch prop statt attr für die änderung disabled.

Da das element, das Sie Anhängen möchten Ihre Veranstaltung nicht auf Dokument bereit, bringen Sie es zum nächsten Vorfahren, dass Sie sicher dort sein wird.
```
$( 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
  } );
} );
```
- Wirklich gute Punkte. Das soll aber nicht fix sein logisches problem.
- Was ist die "logische problem"?
- Fair genug, ich hatte einen zusätzlichen Absatz für die.
- Ich bin versucht, auf vermeiden warten-Dokument bereit und element-id. Will ich mit $(this) für die checkbox und eine variable für den div mit der, mit den Eingängen
- Befestigen Sie die Veranstaltung, um etwas höher in den DOM, wenn das element nicht existiert bereit Zeit.
- hes, die sagen, dass diese Eingänge sind im Anhang in den code. Also, wenn angehängt, wenn das Kontrollkästchen deaktiviert ist, werden diese Eingänge aktiviert bleiben. Er will, dass Sie deaktiviert, in dieser Zeit. but since i am appending those fields the function does not take effect -> das ist, weil die checkbox click-Ereignis nicht aufgerufen auf der append.
- Dies ist eine weitaus bessere Antwort als die akzeptierte Antwort.
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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.