Skip to main content
se añadieron 280 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

AnalizandoEn función al ultimo código publicado en tu codigopregunta puedo concluir que quieres des-habilitardesactivar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo habilitaractivar dicho botón, sin embargo no veo en que punto le colocasahora la clase "has-error" se activas cuando nota1 y es por esonota2 sea mayor a 100, debo agregar que el botón nunca se des-habilitadebe permanecer desactivado cuando nota1 o nota2 sea igual a cero, te dejo un código deen el siguiente ejemplo optimizandoencontraras tu código optimizado y corrigiendo algunos errores:

// 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'><spanguardar' disabled>Guardar<span class='fui-check'></span></button></td><td></td></tr>");
}

// Y aqui donde intento deshabilitarlos
$("table tbody input[type=text]").on('change''keyup',  function () {
 var $tr=$(this).closest('tr');,
  $button=$tr.find('button[type=button].guardar');
,
  $nota1=$tr.find('input[type=text].primera-nota');,
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');,
 nota2= nota1=parseInt($nota2$nota1.hasClassval('has-error')) ? 0,
 : nota2=parseInt($nota2.val());

 if ($nota1.hasClass('has-error') !nota1 || $nota2.hasClass('has-error'nota1>100  ||  !nota2 || nota2>100 ) {
 // si NO desea evaluar nota1/nota2 == 0 entonces utilizar esta condición
 //if ( nota1>100  ||  nota2>100 ) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 total  = nota1 * 60 / 100;
 total += nota2 * 40 / 100;
 total  = total * 20 / 100;
 total  = ( isNaN(total) ) ? "" : parseInt(total);
 $tr.find('span.nota-final').text(parseInt(total));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Quedo atento a tus comentarios, Saludos!! ;))

Analizando tu codigo puedo concluir que quieres des-habilitar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo habilitar dicho botón, sin embargo no veo en que punto le colocas la clase "has-error" y es por eso que el botón nunca se des-habilita, te dejo un código de ejemplo optimizando tu código y corrigiendo algunos errores:

// 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
$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');
 nota2=($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 total  = nota1 * 60 / 100;
 total += nota2 * 40 / 100;
 total  = total * 20 / 100;
 $tr.find('span.nota-final').text(parseInt(total));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

En función al ultimo código publicado en tu pregunta puedo concluir que quieres desactivar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo activar dicho botón, ahora la clase "has-error" se activas cuando nota1 y nota2 sea mayor a 100, debo agregar que el botón debe permanecer desactivado cuando nota1 o nota2 sea igual a cero, en el siguiente ejemplo encontraras tu código optimizado y corrigiendo algunos errores:

// 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' disabled>Guardar<span class='fui-check'></span></button></td><td></td></tr>");
}

// Y aqui donde intento deshabilitarlos
$("table tbody input[type=text]").on('keyup', function () {
 var $tr=$(this).closest('tr'),
  $button=$tr.find('button[type=button].guardar'),
  $nota1=$tr.find('input[type=text].primera-nota'),
  $nota2=$tr.find('input[type=text].segunda-nota'),
  nota1=parseInt($nota1.val()),
  nota2=parseInt($nota2.val());

 if ( !nota1 || nota1>100  ||  !nota2 || nota2>100 ) {
 // si NO desea evaluar nota1/nota2 == 0 entonces utilizar esta condición
 //if ( nota1>100  ||  nota2>100 ) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 total  = nota1 * 60 / 100;
 total += nota2 * 40 / 100;
 total  = total * 20 / 100;
 total  = ( isNaN(total) ) ? "" : parseInt(total);
 $tr.find('span.nota-final').text(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Quedo atento a tus comentarios, Saludos!! ;))

se añadieron 418 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24
// 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>1<center'><td>"+data.inscritosuba[i].cedula+"</td><td>pedro perez<td><td>"+data.inscritosuba[i].estudiante.NOM_APE+"</td><td><input type='text' size='3' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' size='3' 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'>Guardar<check'></span></button></td><td></td></tr>");
}

// Y aqui donde intento deshabilitarlos
$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');
 nota2=($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 if (nota1 == '')
 total nota1 = 0;

 if (nota2 == '')
nota1 * nota260 =/ 0;
100;
 total  =+= (nota1nota2 * 60)40 / 100;
 total += (nota2= total * 40)20 / 100;
 $tr.find('span.nota-final').text(parseInt(total * 20 / 100));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>
$("table tbody").append("<tr class='text-center'><td>1</td><td>pedro perez</td><td><input type='text' size='3' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' size='3' 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'>Guardar</span></button></td><td></td></tr>");

$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');
 nota2=($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 if (nota1 == '')
  nota1 = 0;

 if (nota2 == '')
  nota2 = 0;

 total  = (nota1 * 60) / 100;
 total += (nota2 * 40) / 100;
 $tr.find('span.nota-final').text(parseInt(total * 20 / 100));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>
// 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
$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');
 nota2=($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 total  = nota1 * 60 / 100;
 total += nota2 * 40 / 100;
 total  = total * 20 / 100;
 $tr.find('span.nota-final').text(parseInt(total));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>
se eliminaron 4 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

Analizando tu codigo puedo concluir que quieres des-habilitar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo habilitar dicho botón, sin embargo no veo en que punto le colocas la clase "has-error" y es por eso que el botón nunca se des-habilita, te dejo un código de ejemplo optimizando tu código y corrigiendo algunos errores:

$("table tbody").append("<tr class='text-center'><td>1</td><td>pedro perez</td><td><input type='text' size='3' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' size='3' 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'>Guardar</span></button></td><td></td></tr>");

$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1= ($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2 = $tr$nota2=$tr.find('input[type=text].segunda-nota');
 nota2= ($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 if (nota1 == '')
  nota1 = 0;

 if (nota2 == '')
  nota2 = 0;

 total  = (nota1 * 60) / 100;
 total += (nota2 * 40) / 100;
 $tr.find('span.nota-final').text(parseInt(total * 20 / 100));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Analizando tu codigo puedo concluir que quieres des-habilitar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo habilitar dicho botón, sin embargo no veo en que punto le colocas la clase "has-error" y es por eso que el botón nunca se des-habilita, te dejo un código de ejemplo optimizando tu código y corrigiendo algunos errores:

$("table tbody").append("<tr class='text-center'><td>1</td><td>pedro perez</td><td><input type='text' size='3' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' size='3' 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'>Guardar</span></button></td><td></td></tr>");

$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1= ($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2 = $tr.find('input[type=text].segunda-nota');
 nota2= ($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 if (nota1 == '')
  nota1 = 0;

 if (nota2 == '')
  nota2 = 0;

 total  = (nota1 * 60) / 100;
 total += (nota2 * 40) / 100;
 $tr.find('span.nota-final').text(parseInt(total * 20 / 100));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Analizando tu codigo puedo concluir que quieres des-habilitar el botón "guardar" cuando nota1 y nota2 tengan la clase "has-error" de otro modo habilitar dicho botón, sin embargo no veo en que punto le colocas la clase "has-error" y es por eso que el botón nunca se des-habilita, te dejo un código de ejemplo optimizando tu código y corrigiendo algunos errores:

$("table tbody").append("<tr class='text-center'><td>1</td><td>pedro perez</td><td><input type='text' size='3' class='form-control primera-nota' minlength = '2' maxlength = '3'/></td><td><input type='text' size='3' 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'>Guardar</span></button></td><td></td></tr>");

$("table tbody input[type=text]").on('change',  function () {
 $tr=$(this).closest('tr');
 $button=$tr.find('button[type=button].guardar');

 $nota1=$tr.find('input[type=text].primera-nota');
 nota1=($nota1.hasClass('has-error')) ? 0 : $nota1.val();

 $nota2=$tr.find('input[type=text].segunda-nota');
 nota2=($nota2.hasClass('has-error')) ? 0 : $nota2.val();

 if ($nota1.hasClass('has-error') || $nota2.hasClass('has-error')) {
  $button.attr("disabled", true);
 } else {
  $button.attr("disabled", false);
 }
 if (nota1 == '')
  nota1 = 0;

 if (nota2 == '')
  nota2 = 0;

 total  = (nota1 * 60) / 100;
 total += (nota2 * 40) / 100;
 $tr.find('span.nota-final').text(parseInt(total * 20 / 100));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
   <th>Cedula</th>
   <th>Nombre y Apellido</th>
   <th>Primera Nota</th>
   <th>Segunda Nota</th>
   <th>Nota Final</th>
   <th>Guardar</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

se añadieron 24 caracteres en el cuerpo
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24
Loading
Origen Enlace
fwBasic
  • 2.8k
  • 1
  • 13
  • 24
Loading