0

Necesito validar un checkbox solo cuando tengan escrita la dirección en el campo de texto, tengo los 2 checkbox y los 2 campos de texto dentro de un fieldset, como podria realizar esta validadion?

<fieldset class="cajas">
        <legend>Modo de envio</legend><br>
        <input type="checkbox" name="Modo" id="agencia" onclick="uncheck()" value="Agencia">Agencia<br>
        <label for="agen"></label>
        
        <input class="centrar" name="Agencia" id="agen" placeholder="Ejemplo: Agencia Starken bilbao">
        <br>

        <input type="checkbox" name="Modo" id="domicilio" onclick="uncheck()" value="Domicilio">Domicilio<br>
        
        <label for="direccion"></label>
        <input class="centrar" name="Direccion" id="Nombre" placeholder="Ejemplo: pasaje las tarkas 8554">
    </fieldset>
2
  • 1
    Puedes agregar el codigo JS de lo que hace uncheck()? A que te refieres con 'validar un checkbox'? desactivarlo si no hay texto?
    – F.Igor
    Commented el 27 ago. 2020 a las 6:07
  • asi es que se desactive si no hay texto, en el uncheck tengo una funcion que seleccione uno de los 2 checkbox
    – Daxtrox
    Commented el 27 ago. 2020 a las 12:59

1 respuesta 1

0

Puedes monitorear los cambios en el contenido para desactivar el respectivo checkbox. En el ejemplo usé el evento onkeyup que ocurre cada ez que el usuario envia alguna entrada desde el teclado.

function enableCheckbox(input, checkboxId){
  // console.log(input.value, checkboxId);
  document.getElementById(checkboxId).disabled=(input.value=='')
}


(function(){
    enableCheckbox(document.getElementById('agen'),'agencia');
    enableCheckbox(document.getElementById('Nombre'),'domicilio');    
})();
<fieldset class="cajas">
        <legend>Modo de envio</legend><br>
        <input type="checkbox" name="Modo" id="agencia"  onclick="uncheck()" value="Agencia">Agencia<br>
        <label for="agen"></label>
        
        <input class="centrar" name="Agencia" id="agen"  onkeyup="enableCheckbox(this,'agencia')" placeholder="Ejemplo: Agencia Starken bilbao">
        <br>

        <input type="checkbox" name="Modo" id="domicilio"  onclick="uncheck()" value="Domicilio">Domicilio<br>
        
        <label for="direccion"></label>
        <input class="centrar" name="Direccion" id="Nombre"  onkeyup="enableCheckbox(this,'domicilio')" placeholder="Ejemplo: pasaje las tarkas 8554">
    </fieldset>

Par el caso contrario es similar:

function uncheck(input, textId){
  // console.log(input.value, checkboxId);
  document.getElementById(textId).disabled=(!input.checked)
}


(function(){
    uncheck(document.getElementById('agencia'),'agen');
    uncheck(document.getElementById('domicilio'),'Nombre');    
})();
<fieldset class="cajas">
        <legend>Modo de envio</legend><br>
        <input type="checkbox" name="Modo" id="agencia"  onclick="uncheck(this,'agen')" value="Agencia">Agencia<br>
        <label for="agen"></label>
        
        <input class="centrar" name="Agencia" id="agen"   placeholder="Ejemplo: Agencia Starken bilbao">
        <br>

        <input type="checkbox" name="Modo" id="domicilio"  onclick="uncheck(this,'Nombre')" value="Domicilio">Domicilio<br>
        
        <label for="direccion"></label>
        <input class="centrar" name="Direccion" id="Nombre"   placeholder="Ejemplo: pasaje las tarkas 8554">
    </fieldset>

2
  • Muchas gracias por la respuesta, pero si quiero que sea al reves, que al seleccionar el checkbox se habilite el campo de texto.
    – Daxtrox
    Commented el 27 ago. 2020 a las 17:48
  • 1
    Hola @Daxtrox, agregué un ejemplo para el caso contrario.
    – F.Igor
    Commented el 27 ago. 2020 a las 19:19

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.