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

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.