0

codigo html:

<div class="input-group mb-2">
<span class="input-group-text">8:30 a.m</span>
<input onclick="activarodesactivar()" type="text" class="form-control" id="texto2" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta3()" disabled type="button" id="boton1" >Editar</button>
</div>
</div>

codigo JS:

function activarodesactivar(){
    const htmlElements = document.querySelectorAll('#boton1'); 
    htmlElements.forEach(elemento => elemento.disabled = false);          
}

este código hace que los botones con ID boton1 se activan al hacer click en un input , pero teniendo varios input yo lo que NECESITO ES QUE AL HACER CLICK EN UN INPUT SE ACTIVE EL BOTON Y LOS OTROS BOTONES QUE ESTEN DESACTIVADOS HASTA QUE LE HACES CLICK. espero que me puedan ayudar con este codigo. Muchas gracias por su Paciencia.

1 respuesta 1

-1

He refactorizado tu código para que tengas muchas menos lineas.

Tanto en la funcion alerta(n) como en activareditarturnomtext(n) paso un parametro que será el que indique el número del input/botón que se desea modificar el estado.

async function activareditarturnomtext(n){
  alternarEstadoCampos(n);
  document.getElementById('boton-' + n).disabled = false;
     
}

function alerta(n) {
  var mensaje;
  var op = confirm("Clicka en Aceptar o Cancelar");
  if (op) {
    document.getElementById('boton-' + n).disabled = true;
    document.getElementById('texto-' + n).disabled = true;
    alternarEstadoCampos(n);
  } else {
    document.getElementById('boton-' + n).disabled = true;
  }
}

function alternarEstadoCampos(n) {
  var elementos = document.getElementsByClassName('form-control');
  
  for(i = 0; i < elementos.length; i++) {
    if(elementos[i].id != ('texto-' + n)) {
      if(!elementos[i].value) {
        elementos[i].disabled = !elementos[i].disabled;
      }
    }
  }
}
<!--CONTENEDOR TURNO MAÑANA-->
 <div class="row">
 <div class="col-xl-6">
 <div class="card mb-1">
 <div class="card-header bg-white text-center" id="tmanana"><i class="fas far fa-calendar-alt mr-1"></i><h5>Turno Mañana</h5></div>
<div class="input-group mb-2">
<span class="input-group-text">8:00 a.m</span>
<input onclick="activareditarturnomtext(1)" id="texto-1" type="text" class="form-control" placeholder="">
<div class="input-group-append">
<button  class="btn btn-success" onclick="alerta(1)" disabled type="button" id="boton-1">Editar</button>
</div>
</div>
                                             
<div class="input-group mb-2">
<span class="input-group-text">8:15 a.m</span>
<input onclick="activareditarturnomtext(2)" type="text" class="form-control" id="texto-2" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(2)" disabled type="button" id="boton-2">Editar</button>
</div>
</div>

<div class="input-group mb-2">
<span class="input-group-text">8:30 a.m</span>
<input onclick="activareditarturnomtext(3)" type="text" class="form-control" id="texto-3" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(3)" disabled type="button" id="boton-3">Editar</button>
</div>
</div>

<div class="input-group mb-2">
<span class="input-group-text">8:45 a.m</span>
<input onclick="activareditarturnomtext(4)" type="text" class="form-control" id="texto-4" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(4)" disabled type="button" id="boton-4">Editar</button>
</div>
</div>

Espero que esto te sirva de ayuda, un saludo.

Última modificación (29/08/2022 23:22):

He añadido una nueva función para alterar el estado de los input de texto.

Detecta cuales son los campos de texto que no se están editando y los pone en modo deshabilitado, del mismo modo cuando se termina la edición los vuelve a habilitar todos excepto los que ya han sido completados que quedan bloqueados.

1
  • 3
    te sugiero leer Cómo responder, sobre todo la parte donde dice No todas las preguntas se pueden o se deben contestar. Ahórrate un poco de frustración y evita responder a preguntas que son inciertas o deficientes en detalles específicos que puedan identificar el problema real.
    – David081
    el 29 ago. 2022 a las 15:33

Tu Respuesta

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

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