1

Tengo una línea, que es una estructura dinámica que se despliega en pantalla cada vez que se le da clic a un botón.

<td>
<input type="text" class="txtivaincluido" id="txtivaincluido" name="txtivaincluido[]" readonly="readonly" value=0 style="width:75px"/>
</td>
<td  class="eliminar">
    ELIMINAR
</td>       

Bajo algunas reglas de negocio, esta línea debe presentarse habilitada, de modo que el usuario pueda ingresar un valor en el text o bien, pueda eliminar dicha fila, dando clic en el texto "ELIMINAR".

El evento click sobre el texto "ELIMINAR" lo manejo con esto:

$(document).on("click",".eliminar",function()
{

El problema que tengo es que para los casos en donde la línea debe presentarse deshabilitada, es decir, que el usuario no pueda ingresar valor en el text, ni que al hacer clic en el texto "ELIMINAR", se elimine la fila, no logro deshabilitar el "ELIMINAR". Lo que hago es lo siguiente:

$(this).find("td:eq(0)").find("input").attr('disabled',true);
$(this).find("td:eq(1)").removeClass("eliminar");

Se deshabilita el input text, pero no se me deshabilita el "ELIMINAR".

Tal como me sugirió @Dev.Joel, incorporé un botón para eliminar la fila, pero tuve que hacer un cambio a la lógica de eliminación de la fila:

            $(document).on("click",".eliminar",function()
            {
                    var parent = $(this).parents().get(0);
                    var parent0 = $(parent).parents().get(0);
                    var fila=$(parent).attr('id');
                    console.log(parent);
                    console.log(parent0);
                    $(parent0).remove();    

Con esto, funciona tal como necesito.

4
  • ¿No sería más simple añadir un botón dentro del td y aplicar el mismo procedimiento del input?
    – Dev. Joel
    Commented el 6 may. 2018 a las 17:51
  • Entiendo que $(this).find("td:eq(0)").find("input") es el botón eliminar, entonces tal vez quieras usar unbind: $(this).find("td:eq(0)").find("input").unbind("click");
    – track3r
    Commented el 7 may. 2018 a las 13:23
  • Estás usando removeClass, eso solamente le quita la clase al elemento. Usa remove()
    – mattias21
    Commented el 9 may. 2018 a las 1:08
  • 1
    @JuncoFuerte me alegro de que encontraras tu propia solución con ayuda de otros usuarios. Por favor, ponla en la sección de respuestas (en Stack Overflow se permite que respondas tus propias preguntas) en lugar de editar la pregunta para añadir la solución. Lee Cómo preguntar y Cómo responder para más información.
    – Alvaro Montoro
    Commented el 9 may. 2018 a las 14:07

2 respuestas 2

0

Yo que tú usaría botones, y estílalos, en este caso he puesto algo de bootstrap para que sea más vistoso, pero eso está en tus manos.

DISABLED

El atributo deshabilitado es un atributo booleano.

Cuando está presente, especifica que el elemento debe estar deshabilitado.

Un elemento desactivado no se puede usar.

El atributo desactivado se puede configurar para evitar que un usuario use el elemento hasta que se cumpla alguna otra condición (como seleccionar una casilla de verificación, etc.). Entonces, un JavaScript podría eliminar el valor deshabilitado y hacer que el elemento se pueda usar.


EJEMPLO (con tu código)


$(document).ready(function(){
  $(".eliminar").click(function(){console.log("A");});
  $(".hab").click(deshabilitar);
  $(".dis").click(habilitar);
});

function deshabilitar(){
  $(".eliminar").removeAttr('disabled');
}

function habilitar(){
  $(".eliminar").attr('disabled','disabled');
}
table,tr,td{text-align:center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table>
  <tr>
    <td>
      <input type="text" class="form-control txtivaincluido" id="txtivaincluido" aria-describedby="txtivaincluido">
    </td>
    <td>
      <button type="button" class="btn btn-danger eliminar">ELINMINAR</button>
    </td>
  </tr>
  <tr>
    <td>
      <br/>
    </td>
  </tr>
  <tr>
    <td>
      <button type="button" class="btn btn-success hab">HABILITAR</button>
    </td>
    <td>
      <button type="button" class="btn btn-warning dis">DESHABILITAR</button>
    </td>
  </tr>
</table>

0

Si tu objetivo es eliminar el elemento usa $('.eliminar').remove()

Si lo que quieres es que no actúe si no es editable puedes hacer lo siguiente $('.eliminar').attr('disabled', true) y por supuesto, ya que no usas un botón añadiría una clase css para manejar ese elemento:

.eliminar:disabled{
    pointer-events:none;
    /* más propiedades */
}

Esto debería funcionar tanto si usas un botón como si no, sin embargo deberías mirar si el elemento es modificable o no en el momento en que construyes el dom (ya que lo haces de manera dinámica) y asignar propiedades o incluso elementos diferentes allí

Por ejemplo:

const elementoEditable = 'aqui va el html que inyectas cuando si se puede editar';
const elementoNoEditable = 'html sin el botón y un span en el lugar del input';

const elementoFinal = esEditable ? elementoEditable : elementoNoEditable;

const elemento = $(elementoFinal).appendTo('.contenedor');

// la variable elemento hace referencia al elemento que se acaba de inyectar al dom, a continuación puedes modificarlo para que tenga el contenido deseado

Y así podrías controlar si el elemento se puede eliminar o no de una manera más genérica

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.