He estado intentando deshabilitar los botones que se crean dinámicamente pero no funciona, he probado con .prop()
y también con .attr("disabled", true)
(este último lo he usado múltiples veces en todo el proyecto sin problemas, pero con botones ya existentes) y tampoco.
Éste es el código:
// estos datos vienen desde AJAX
var data = {
inscritosuba: [
{ cedula: 1, estudiante: { NOM_APE: "John Doe"} },
{ cedula: 2, estudiante: { NOM_APE: "Juan Nadie"} },
{ cedula: 3, estudiante: { NOM_APE: "Jane Doe"} }
]
}
// Aquí está el código donde se generan los botones:
for(var i = 0; i < data.inscritosuba.length; i++){
$("table tbody").append("<tr class='text-center'><td>"+data.inscritosuba[i].cedula+"</td><td>"+data.inscritosuba[i].estudiante.NOM_APE+"</td><td><input type='text' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' class='form-control segunda-nota' minlength = '2' maxlength = '3'/></td><td><span class='nota-final'></span></td><td><button type='button' class='btn btn-primary guardar'><span class='fui-check'></span></button></td><td></td></tr>");
}
// Y aqui donde intento deshabilitarlos
$(document).on('change', 'input[type=text].primera-nota', function () {
if ($(this).hasClass('has-error')) {
var nota1 = 0;
$(this).closest('td').siblings().find('button[type=button].guardar').hide(); // Esto si funciona, por lo cual se que si esta encontrando el boton adecuado
} else {
var nota1 = $(this).val();
$(this).closest('td').siblings().find('button[type=button].guardar').attr("disabled", false);
}
var elemento = $(this).closest('td').siblings().find('input');
if (elemento.hasClass('has-error')) {
var nota2 = 0;
$(this).closest('td').siblings().find('button[type=button].guardar').attr("disabled", true);
} else {
var nota2 = elemento.val();
$(this).closest('td').siblings().find('button[type=button].guardar').attr("disabled", false);
}
if (nota1 == '') {
nota1 = 0;
}
if (nota2 == '') {
nota2 = 0;
}
var total = (nota1 * 60) / 100;
total += ((nota2 * 40) / 100);
$(this).closest('td').siblings().find('span.nota-final').text(parseInt((total * 20) / 100));
});
//Aqui donde le asigno la clase has-error
$(document).on('keyup','input[type=text].primera-nota,input[type=text].segunda-nota',function(){
if(parseFloat($(this).val()) > 100){
$(this).addClass("has-error");
}else{
$(this).removeClass("has-error");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Cedula</td>
<td>Nombre</td>
<td>Primera Nota</td>
<td>Segunda nota</td>
<td>Nota final</td>
<td>Guardar</td>
<td>Otros</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
¿Qué es lo que falla? ¿Cómo puedo solucionarlo?