I am generating a structure dynamically, which I obtain from a json. It has the function that when clicking on the user's name will show another card in which I have 3 checkbox.
The problem I have is that by getting the id and value of each checkbox, no matter which one you select, you only get the value of the first generated checkbox.
If you can help me to correctly identify the id and value of each checkbox, thank you very much.
Link Jsfiddle link
var json = [{
"Usuario": "Usuario1",
"Instalado": false,
"Project": false,
"Visio": false,
"Activo": true,
"Ruta": "https://imgur.com/a/n2EX901",
"Selector": "UsuarioUno"
}, {
"Usuario": "Usuario2",
"Instalado": false,
"Project": false,
"Visio": false,
"Activo": true,
"Ruta": "https://imgur.com/a/n2EX901",
"Selector": "Usuario2"
}, {
"Usuario": "Usuario3",
"Instalado": false,
"Project": false,
"Visio": false,
"Activo": true,
"Ruta": "https://imgur.com/a/n2EX901",
"Selector": "Usuario3"
}];
$('#btnBuscar').click(function() {
var Usuario = '';
var Html = '';
$.each(json, function(i, item) {
Html += '<div class="col s4">' +
'<div class="card">' +
' <div class="card-image waves-effect waves-block waves-light">' +
' <img class="activator" src="' + item.Ruta + '">' +
' </div>' +
' <ul class="card-action-buttons">' +
' <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-av-repeat">' +
' </i></a></li>' +
' <li><a class="btn-floating waves-effect waves-light red accent-2"><i class="mdi-action-favorite">' +
' </i></a></li>' +
' <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator">' +
' </i></a></li>' +
' </ul>' +
' <div class="card-content">' +
' <span class="card-title activator grey-text text-darken-4">' + item.Usuario + '<i class="material-icons right">more_vert</i></span>' +
' <p>' +
' <a href="#">This is a link</a></p>' +
' </div>' +
' <div class="card-reveal">' +
' <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>' +
' <p>' +
' Here is some more information about this product that is only revealed once clicked' +
' on.</p>' +
'<p>' +
' <input type="checkbox" id="office-' + item.Selector + '" class="lnkOffice" />' +
' <label for="office-' + item.Selector + '">Office 365</label>' +
'</p>' +
'<p>' +
' <input type="checkbox" id="visio-' + item.Selector + '" class="lnkVisio" />' +
' <label for="visio-' + item.Selector + '">Visio</label>' +
'</p>' +
'<p>' +
' <input type="checkbox" id="project-' + item.Selector + '" class="lnkProject" />' +
' <label for="project-' + item.Selector + '">Project</label>' +
'</p>' +
' </div>' +
' </div>' +
'</div>';
});
$("#Estructura").append(Html);
$('.lnkOffice').click(function() {
// $('input').unbind()
var idOffice = $("input:checkbox.lnkOffice").attr("id");
console.log(idOffice);
var check = $('#' + idOffice).prop('checked');
console.log(check);
});
$('.lnkVisio').click(function() {
// $('input').unbind()
var idVisio = $("input:checkbox.lnkVisio").attr("id");
console.log(idVisio);
var check = $('#' + idVisio).prop('checked');
console.log(check);
});
$('.lnkProject').click(function() {
// $('input').unbind()
var idProject = $("input:checkbox.lnkProject").attr("id");
console.log(idProject);
var check = $('#' + idProject).prop('checked');
console.log(check);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="form-group">
<a id="btnBuscar" class="btn waves-effect waves-light light-blue darken-4" type="button" value="Buscar" style="width: 100%; margin-top: 10px;" />Buscar</a>
</div>
<div class="row">
<div id="Estructura">
</div>
</div>