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
.
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 jqueryprop
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.