1

Tengo dos input text y uno de los dos debe ser obligatorio, da igual el que se cumplimente, mientras que el otro debe quedar como readonly para evitar que se escriba en los dos.

<input type="text" name="carne">
<input type="text" name="pescado">

¿Cómo puedo hacerlo en jquery o javascript?

Gracias.

2
  • 2
    Echa un vistazo al evento onchange para controlar cuando cambia el texto en los input (w3schools.com/jsref/event_onchange.asp, api.jquery.com/change), y a la función de jquery prop para cambiar propiedades de un elemento (api.jquery.com/prop) Ojo con readonly porque tendrás que poner la o en mayúscula: $("#pescado").prop('readOnly', true); Intenta hacerlo tú y si te atascas pega el código y vemos como lo arreglamos.
    – ordago
    Commented el 21 oct. 2019 a las 9:59
  • Si alguna de las respuestas soluciona tu pregunta, recuerda aceptarla para que sirva de referencia a futuros visitantes. En caso contrario, déjanos tus comentarios para ver de que manera se pueden mejorar.
    – DjCrazy
    Commented el 29 oct. 2019 a las 21:24

3 respuestas 3

1

Hola lo hice de esta manera espero te sirva.

Solo utilice el evento onchange para cambiar los inputs automáticos y cambiarle el atributo readonly dependiendo cual se haya llenado primero.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <label>Carne:</label>
    <input type="text" id="txtN1" onchange="carne(this.value)" />
    <br /><br />
    <label>Pescado</label>
    <input type="text" id="txtN2" onchange="pescado(this.value)" />
    <br /><br />
  </body>
  <script>
    function carne(value) {
      if (value > 0) {
        document.getElementById("txtN2").readOnly = true;
      }
    }

    function pescado(value) {
      if (value > 0) {
        document.getElementById("txtN1").readOnly = true;
      }
    }
  </script>
</html>

1
  • Si requieres probar con el segundo input y que el primero sea readonly tendrás que ejecutar de nuevo ya que no especificaste si habrá un botón de reset. Commented el 24 oct. 2019 a las 16:39
1

Primero, debes agregas un class o un id para acceder fácilmente al input.

A los dos input les asignas el atributo required en el html.

Luego, desde jQuery, al hacer click en cualquiera de los input, eliminas el atributo required del otro y le agregas el atributo readonly

//Al hacer click en el input carne
$('#carne').click(function(){
  //elimino el atributo required y agrego el atributo readonly de pescado
  $('#pescado').removeAttr('required').attr('readonly','readonly');
})

//Al hacer click en el input pescado
$('#pescado').click(function(){
//elimino el atributo required y agrego el atributo readonly de carne
  $('#carne').removeAttr('required').attr('readonly','readonly');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="carne" id="carne" required>
<input type="text" name="pescado" id="pescado" required>

Verifica en la consola de chrome que los atributos son cambiados debidamente al hacer click en cualquiera de los input.

0

Puedes capturar los eventos keypress sobre los inputs. Yo he puesto los nombres de los dos inputs, pero también lo podrías hacer poniendo la misma class en los dos inputs. Luego hay que habilitar o deshabilitar el input dependiendo el valor del contrario.

$('input[name="carne"], input[name="pescado"]').keypress(function(){

    $('input[name="carne"]').prop('disabled', $('input[name="pescado"]').val().length);
    $('input[name="pescado"]').prop('disabled', $('input[name="carne"]').val().length);

});
0

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.