3

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?

1
  • Según tu código el botón guardar se desactiva cuando los input con clase "*-nota" tienen la clase "has-error" pero nunca le asignas dicha clase por lo que nunca podrás lograr que este botón se desactive, ademas la variable elemento esta apuntado mal, esta debe apuntar al input con clase "segunda-nota"
    – fwBasic
    Commented el 20 abr. 2017 a las 5:06

3 respuestas 3

2

El problema no esta en prop o attr. Sino que ambos ifs invierten la condición por lo que cuando uno lo deshabilita, el otro vuelve a habilitarlo, cancelando la primera accion. Por eso hide funciona, si usaras show en el otro if (en el else) no funcionaria por que pasaria lo mismo, uno lo oculta y el otro lo muestra.

para comprobarlo prueba eliminando/comentando este bloque (el de elemento) y vuelve a poner .attr("disabled", true); en donde ahora dice .hide();

  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);
  }

Conclusion: hay un error en la lógica de los ifs. Por otro lado, si vas a usar el mismo elemento muchas veces, seria mas legible que lo captures una sola vez en una variable y lo utilices luego en todas las otras ocaciones, solo una sugerencia. Salu2

1
  • Efectivamente, era un error en los if, lo cambie y se solucino Commented el 20 abr. 2017 a las 14:24
0



Preguntonta: ¿Y no has probado directamente con "display none"...?

document.getElementById("_ID_de_tu-boton_").style.display="none"

A lo mejor... ¿No?

2
  • No necesito ocultarlos, necesito deshabilitarlos, y como se ve en el código los botones no tienen id, los consigo por ser primos de los input y por la clase Commented el 20 abr. 2017 a las 0:35
  • Ah, OK, @IHumanizado ... ¿Y con "nombreDelObjetoADeshabilitar.disabled = true;" ... haz probado...?
    – user33611
    Commented el 20 abr. 2017 a las 0:42
0

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!! ;))

1
  • La clase has-error si se añade en los botones, solo que olvide poner esa parte del código, ya edito la pregunta Commented el 20 abr. 2017 a las 12:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.