0

Tengo el siguiente checkbox y lo quiero cambiar a text depues del click

<input type="checkbox" name="nutriente_f1<? echo $registro6['ID_NUTRIENTE']; ?>" id="nutriente_f1-<? echo $registro6['ID_NUTRIENTE']; ?>" onclick="$nutriente_f1(<? echo $registro6['ID_NUTRIENTE']; ?>,<? echo $registro6['ID_NUTRIENTE']; ?>);">

Lo unico que quiero es cambiarle el Type a text

3 respuestas 3

1

Hice un pequeño codigo, espero te sirva, lo hice con jquery y JS puro:

$("#prueba").click((e) => {
  
  let attrType = $(e.target).attr("type");
  
  if(attrType === "checkbox"){
    $(e.target).attr("type","text");
  }else{
    $(e.target).prop('checked',false);
    $(e.target).attr("type","checkbox");
  }

});

var elemento = document.getElementById("prueba2");
elemento.addEventListener("click", () => {
 
  let type = elemento.getAttribute("type"); 
  if(type === "checkbox"){
    elemento.setAttribute("type","text");
  }else{
    elemento.setAttribute("type","checkbox");
  }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="prueba" type="checkbox">prueba 1 (Jquery)

<input id="prueba2" type="checkbox"> prueba 2 (JS PURO)

3
  • Esta genial, gracias Solo que cuando regresa a checkbox sigue en checked Se puede que al regresar se desmarque sola? el 12 sep. 2018 a las 19:49
  • $("#prueba").click((e) => { Aqui en la parte de prueba, se puede poner una variable?? el 12 sep. 2018 a las 19:58
  • Listo edite mi ejemplo en prueba para que cuando vuelva al checkbox este deseleccionado, y si puedes colocar una variable el 12 sep. 2018 a las 20:19
0

Con Javascript puedes hacerlo de esta forma:

<input id="inputTest" type="checkbox" name="password" />
    
    <script type="text/javascript">
        document.getElementById('inputTest').type = 'text';
    </script>

0

Con jQuery podrías hacerlo de la siguiente manera

$('#nutriente').on('change',function(){
    //Cambio el tipo a text
    $(this).prop('type','text');
    //Le pongo el label asociado como placeholder
    $(this).prop('placeholder', $('[for="'+$(this).prop('id')+'"]').text());
    //Escondo el label
    $('[for="'+$(this).prop('id')+'"]').css('display','none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="nutriente">Cambio al clickearme!</label>
<input type="checkbox" id="nutriente">

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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