I have the following checkbox and I want to change it to text after clicking
<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']; ?>);">
The only thing I want is to change the Type to text
I made a small code, I hope it serves you, I did it with jquery and pure JS:
$("#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)With Javascript you can do it this way:
<input id="inputTest" type="checkbox" name="password" />
<script type="text/javascript">
document.getElementById('inputTest').type = 'text';
</script>With jQuery you could do it in the following way
$('#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">