Tengo un sitio en LARAVEL en donde tengo unos input que se cargan dentro de un foreach
los cuales dependen de unos checkboxes que también se cargan dentro de un foreach
.
Siendo de la siguiente manera como lo tengo.
@foreach($indumentaria as $equipo)
<tr>
<td>
<input type="checkbox" id="{{$equipo->nombre}}" name="equipo[]" value="{{$equipo->id}}" onchange="ValidaCantidad()">
<label for="{{$equipo->nombre}}">{{$equipo->nombre}}</label>
</td>
<td>${{$equipo->precio}}</td>
<td>{{$equipo->cantidad}}</td>
<td>
<center>
<input type="number" id="quantity" name="quantity">
</center>
</td>
</tr>
@endforeach
Y esta es la función que tengo en javascript.
<script type="text/javascript">
var control = document.getElementById('quantity').value;
function ValidaCantidad(){
$(document).ready(function() {
var equipo = $("#{{$equipo->nombre}}").is(":checked");
if (!equipo) {
document.querySelector('quantity').required = false;
}else if (equipo.prop('checked')) {
document.querySelector('quantity').required = true;
if (control < 1) {
$.alert({
title: ''+'<nav> <i class="fa fa-warning"></i> ¡Atención!</nav>',
content: ''+'<p>Ingrese un valor válido.</p>',
backgroundDismiss: true,
});
}
}
});
}
</script>
Intenté que funcionara cuando cambian de valor los checkboxes, <input type="checkbox" onchange="ValidaCantidad()">
.
Pero no me funciona, lo que quiero es que al seleccionar un checkbox de inmediato el input (al lado de disponibilidad, como muestra la imagen) cambie de no requerido a requerido. Dependiendo del checkbox seleccionado.
Esto con el motivo de que si el usuario va a seleccionar un checkbox después no puede dejar vacío el input que le corresponde al checkbox escogido.
Este es el formulario.