Disable Checkbox auf dynamisch erstellte Elemente jQuery

Question

Ich versuche, Checkbox-Elemente auf GPA Calculator App mit jQuery

Die Checkbox wird dynamisch erstellt zu deaktivieren, wenn ein neuer Kurs Hinzufügen, um anzuzeigen, wenn der Student den Kurs, um wiederholt zu füllen seine frühere Klasse darauf:

if(hourSum < 21){ 
     $("<div class='course'>" 
         + "<div class='tdnum'>" 
         + "<span class='subNum' id='subNum" + i + "'>" + i + " </span>" 
         + "</div>" 
         + "<div class='tdgrade'>" 
         + "<span class='requiredMsg' id='markReq" + i + "'>*</span>" 
         + "<input type='number' class='mark'>" 
         + "<span class='errorMessage' id='markError" + i + "'>* between 35 - 100</span>" 
         + "</div>" 
         + "<div class='tdhour'>" 
         + "<span class='requiredMsg' id='shourReq" + i + "'>*</span>" 
         + "<input type='number' class='shour'>" 
         + "<span class='errorMessage' id='shourError" + i + "'>* between 1 - 3</span>" 
         + "</div>" 
         + "<div class='tdrep'>" 
         + "<input id='subState" + i + "' class='repSub' type='checkbox'>" 
         + "</div>" 
         + "<div class='tdpgrade'>" 
         + "<input type='number' class='rmark' id='rmark" + i + "' disabled>" 
         + "<span class='errorMessage' id='rmarkError" + i + "'>* between 35 - 100</span>" 
         + "</div>" 
         + "<div class='tddelete'>" 
         + "<span class='remove'><img src='img/delete.png'></span>" 
         + "</div>" 
        + "</div>").appendTo(".ctable").hide().fadeIn(300); // add fade effect on adding elements   
      i++; 
    } 

ich brauche diese Checkbox der Klasse deaktivieren .repSub, wenn die Anzahl der übergebenen Stunden = 0 und Gesamtdurchschnitt = 0

"<input id='subState" + i + "' class='repSub' type='checkbox'>" 

habe ich versucht, diese Methode:

$(".repSub").prop("disabled", true); 

auch habe ich versucht:

$(".repSub").attr("disabled", 'disabled'); 

aber beide Methoden arbeiten nicht dynamisch erstellt Checkbox

gibt es eine gearbeitet Lösung für dieses Problem?

Answer 1

eine Callback-Funktion verwenden Sie den Code tatsächlich die Elemente zur Ausführung auf dom dynamisch geladen werden, deshalb wird der Code nicht funktioniert, während Sie den
$ („repSub.‚) In prop (‘disabled“, true). oder $ (". RepSub"). Attr ("deaktiviert", "deaktiviert");

Hier ist der Beispielcode ich hier geschrieben, einfach etwas ändern machen hier

"+ </div>)".appendTo(".ctable").hide().fadeIn(300,function(){ 
$(".repSub").prop("disabled", true); 
}); 

I fadeIn Callback-Funktion nur verwenden, so dass es durchweg nach dem Elem fadeIn

arbeiten Sie mir bitte mitteilen, wenn dies funktioniert oder nicht

Wenn es nicht funktioniert, Sie Promise() oder getan() -Methode tun das Zeug Hier ist das Beispiel

verwenden können

"Qo" ist eine Div-ID und wo ich #xx div dynamisch setze und dann nach dem Laden des Inhalts ändere ich etwas Inhalt und deaktiviere das Element.

Bitte kommentieren.

Answer 2

Ich fand feine Lösung für das Problem nach

Der einzige Weg, mehr als Art und Weise zu testen, die für mich gearbeitet wird, ist Ankur Das Methode, die er in seiner Antwort erwähnt

I .promise().done(function(){}) Methode mit Callback-Funktion verwendet, nachdem das Anhängen die Elemente, die dynamisch hinzugefügt werden:

+"</div>").appendTo(".ctable").hide().fadeIn(300).promise().done(function(){ 
        hour = Number($("#hrs").val()); 
        avg = Number($("#avg").val()); 
        if (hour === 0 && avg === 0) { 
        $(".repSub").prop("disabled", true); 
        } 
        else { 
        $(".repSub").prop("disabled", false); 
        } 
      }); 

Live-Demo für die Problemlösung: https://jsfiddle.net/e9ubveL2/10/