Modifier case à cocher et l'étiquette pour l'identification

Question

j'ai une fonction qui remplace les espaces réservés dans une chaîne de HTML avec le contenu des objets JS:

function inputCards() { 
    $('#maincontent').empty(); 
    storyQuests.name.forEach(function(val, i) { 
     var formattedCard = mainCardHTML.replace('%questName%', storyQuests.name[i]) 
             .replace('%questChapter%', storyQuests.chapter[i]) 
             .replace('%questImg%', storyQuests.img[i]) 
             .replace('%questDescription%', storyQuests.description[i]) 
             .replace('replaceBox', storyQuests.check[i]); 
     $('#maincontent:last').append(formattedCard); 
    }) 
} 

Voici comment le code est maintenant, le problème je suis tombé est que J'utilise matérialiser et le code de case à cocher sur une carte est:

<div class="card-action"> 
    <form action="#"> 
    <p> 
     <input type="checkbox" id="replaceBox" /> 
     <label for="replaceBox" class="white-text">Complete!</label> 
    </p> 
    </form> 
</div> 

tout sur la page va OK, sauf quand il charge toutes les cartes toutes les cases à cocher lorsque vous cliquez dessus seul effet de la case à cocher dans la première carte! J'ai donc supposé que c'était parce qu'ils avaient tous le même identifiant de "replaceBox". Donc j'ajouté à résoudre:

.replace('replaceBox', storyQuests.check[i]); 

(En fait, j'ai commencé avec quelque chose d'autre qui ne fonctionne pas du tout, essayé plusieurs autres moyens et a finalement renoncé et a créé un élément supplémentaire dans mon objet de tenir la case à cocher ID que ce référencement est:

check: ['box0', 'box1', 'box2', 'box3', 'box4', 'box5', 'box6', 'box7', 'box8', 'box9', 'box10', 'box11', 'box12', 'box13', 'box14', 'box15', 'box16', 'box17', 'box18', 'box19', 'box20', 'box21', 'box22', 'box23', 'box24', 'box25', 'box26', 'box27', 'box28', 'box29', 'box30', 'box31', 'box32', 'box33', 'box34', 'box35', 'box36', 'box37', 'box38', 'box39', 'box40', 'box41', 'box42'] 

Cependant, même si le .replace fonctionne sur tout le reste, sur ces ID, il ne semble pas, il arrête toutes les cases de travail et la console affiche cette erreur:

GET file:///A:/sites/mysite-com/undefined 
net::ERR_FILE_NOT_FOUND 

Donc, finalement, comment remplacer les mots "replaceBox" par des valeurs différentes, ou honnêtement, toute autre solution pour permettre à chaque case à cocher d'être vérifiée indépendamment. J'ai pensé à supprimer tout identifiant sur les cases à cocher mais je pense que j'en aurai besoin à l'avenir car je prévois de permettre aux gens de se connecter et de conserver l'état vérifié de chaque carte.

EDIT 1: Le code mainCardHTML:

var mainCardHTML = "<div class='col hide-on-small-only m3'>&nbsp;</div>" + 
        "<div class='col s6'>" + 
        "<h5 class='header xvred-text'id='replaceMe'>%questName%</h5>" + 
        "<h6 class='header xvblue-text'id='replaceMe'>%questChapter%</h6>" + 
        "<div class='card horizontal hoverable'>" + 
         "<div class=card-image><img id='replaceMe' src=%questImg%></div>" + 
         "<div class='card-stacked xvred'>" + 
         "<div class='card-content xvblue'>" + 
          "<p id='replaceMe'>%questDescription%" + 
         "</div>" + 
         "<div class=card-action>" + 
          "<form action=#>" + 
          "<p><input id='replaceBox' type=checkbox>" + 
          "<label class=white-text for='replaceBox'>Complete!</label>" + 
          "</form>" + 
         "</div>" + 
         "</div>" + 
        "</div>" + 
        "</div>" + 
        "<div class='col hide-on-small-only m3'>&nbsp;</div>" 

L'objet storyQuests (L'objet réel est moyen de long pour poster ici pour une meilleure lisibilité si je l'ai remplacé les cordes):

var storyQuests = { 
    name: ["43 strings", "43 strings", "..."], 
    chapter: [43 numbers, 43 numbers, ...], 
    img: ["43 strings", "43 strings", "..."], 
    description: ["43 strings", "43 strings", "..."] 
    check: ["box0", "box1", "..."] 
} 

Answer 1

D'abord un petit mot, passez en revue le code HTML de mainCardHTML, il y a deux éléments <p> non fermés (pas </p>) et certains des attributs html n'ont pas le ' dans leurs valeurs. Dans votre objet storyQuests, vous n'avez pas la virgule avant le champ check. C'est probablement une faute de frappe qui colle le code dans la question, mais vérifiez-le.

La fonction Javascript replace ne remplace par défaut que la première apparition du mot. Dans votre cas, vous avez deux replaceBox sur chaque carte, vous devez donc utiliser ...

.replace(/replaceBox/g, storyQuests.check[i] 

Avec tout cela, votre code de remplacement fonctionne sans problème dans violon ...

https://fiddle.jshell.net/rigobauer/v8erbuur/