0

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>&nbsp;&nbsp;<i class="fa fa-warning"></i>&nbsp;¡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.

introducir la descripción de la imagen aquí

3 respuestas 3

2

$( ()=> {
  
  $(document).on('change', '.checkValidator', function(){
      
      const quantity = $(this).parents('tr').find('td:last').find('.quantity');
      quantity.prop('disabled', !$(this).is(':checked'));
      quantity.prop('required', $(this).is(':checked'));
      console.log( quantity[0] );
    
  })
  
  $(document).on('submit','.send',function(e){
  e.preventDefault(); e.stopPropagation();
  alert('Se envió por que ya no hay datos requeridos');
  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="send">
<table border="1">
  <tr>
    <td><input type="checkbox" class="checkValidator"></td>
    <td>500</td>
    <td>Martillo</td>
    <td><input type="number" disabled class="quantity"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkValidator"></td>
    <td>300</td>
    <td>Maza</td>
    <td><input type="number" disabled class="quantity"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkValidator"></td>
    <td>1500</td>
    <td>Marra</td>
    <td><input type="number" disabled class="quantity"></td>
  </tr>
</table>
<button type="submit">Prueba enviar</button>
</form>

Está muy raro tu código, el JS es el que no le veo mucha estructura, te daré unos tips. Primero, si vas a utilizar Jquery, trata de escribir todo en Jquery, Vanilla Javascript es muy útil cuando quieres alcanzar cosas específicas que Jquery no puede.

Esta función nos dice cuando el DOM está listo, es útil cuando quieres lanzar ciertas cosas al finalizar la carga de pantalla como un AJAX.

$(document).ready(function() { ... }

Sin embargo lo estás poniendo dentro de una función, y eso no se ejecutará hasta que ValidaCantidad() sea invocada, entonces va al contrario. ( Lo reduciré a arrowFunction )

$( ()=> {
  ...
})

Ahora tienes un problema en tu JS

var equipo = $("#{{$equipo->nombre}}").is(":checked");

Si el foreach abarca el script, entonces estarías creando tantos scripts como vueltas de, funciona, pero no es la mejor práctica, es mejor si utilizas un selector genérico y luego pones al DOM a escuchar ciertos eventos, por tanto añadiré unas clases a los input

@foreach($indumentaria as $equipo)
    <tr>
        <td>
            <input type="checkbox" id="{{$equipo->nombre}}" name="equipo[]" value="{{$equipo->id}}" class="checkValidator">
            <label for="{{$equipo->nombre}}">{{$equipo->nombre}}</label>
        </td>

        <td>${{$equipo->precio}}</td>

        <td>{{$equipo->cantidad}}</td>
        <td>
            <input type="number" id="quantity" disabled name="quantity" class="quantity">
        </td>
    </tr>
@endforeach

Añadí .checkValidator y .quantity ahora creamos el listener

$( document ).on( 'change', '.checkValidator', function() {
  ...
})

Con esto estamos pendientes si se checkea o no, no importa el ID, el selector será único. Ahora, podemos trabajar con el row de la tabla ya que tenemos un selector y podemos hacer requerido el quantity si o no, dependiendo del checkbox

$( document ).on( 'change', '.checkValidator', function() {
  //Esto debe regresarnos el selector del quantity
  const quantity = $(this).parents('tr').find('td:last').find('.quantity');
  //Ponemos el required dependiendo si el selector del checkbox está checkeado
  quantity.prop('required', $(this).is(':checked') );
  //Lo activamos y desactivamos según el checkbox (negado el valor)
  quantity.prop('disabled', !$(this).is(':checked'));
})

Date cuenta que quité el <center></center> suele arreglar muchas cosas pero es más pro si lo haces con CSS

Espero te puedas guiar con este ejemplo, te dejo también un snippet para que lo veas tú mismo saludos

3
  • Vale muchas gracias, funciona como lo utilizo para mostrar una alerta puse el codigo pero ahora la alerta no aparece. Ademas por otro lado como podría hacerlo del otro modo si un usuario se quiere pasar de listo e ingresa un valor al input pero no selecciona el checkbox. Ahora intento validar aquello pero no me funciona. Asi: $(document).on('input','.quantity', function(){const checkboxed = $(this).parents('tr').find('td:first').find('.check'); checkboxed.prop('required');});
    – M4uriXD
    el 25 feb. 2019 a las 17:09
  • quantity.prop('disabled', !$(this).is(':checked')); hay que agregar una sentencia para habilitar y deshabilitar el input, solo que este va negado. Te agregué el código al snippet y al ejemplo de tu código, recuerda que de inicio, los .quantity van deshabilitados (como en el HTML) el 25 feb. 2019 a las 17:36
  • Vale, muchas gracias, pensaba de otra manera validar aquello con alguna alerta pero asi igual funciona bien.
    – M4uriXD
    el 25 feb. 2019 a las 18:06
0

Como a mi no me gusta combinar código del lado del servidor con código del lado del cliente a menos que sea MUY necesario como en el caso de especificar alguna ruta de laravel y tampoco soy fan de inline events por mantenimiento de código. Puedes hacer lo siguiente:

@php 
   $contador = 0;
@endphp
@foreach($indumentaria as $equipo)
    <tr>
        <td>
            <input type="checkbox" class="check" data-id="{{ $contador }}" 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{{ $contador }}" name="quantity">
            </center>
        </td>
    </tr>
@php 
   $contador++;
@endphp
@endforeach

Con jQuery:

$(document).ready(function(){
   $('.check').on('change', function(e){
      comprobarCheck(this);
   });
});

function comprobarCheck(elemento){
   var id = $(elemento).data('id');
   var qty_id = '#quantity'+id;

   if($(elemento).is('checked')){
      $(qty_id).attr('required', 'required');
   }else{
      $(qty_id).removeAttr('required');
   }

}
1
  • Mmmm acabo de probar e igual deja enviar el formulario. Si se agrega el required no me debería dejar enviar el formulario.
    – M4uriXD
    el 25 feb. 2019 a las 16:49
0

puedes hacerlo asi:

nota: en el evento onchange="ValidaCantidad()" hay que agrega el this onchange="ValidaCantidad(this)" para que nos envie ese elemento en especifico que sera el elemento donde se origine el cambio

tambien podemos agregar ayuda visual con el attributo disabled html y con css la propiedad cursor: not-allowed;

          /// creamos la funcion validaCantidad y recibimos el elemento especifico
          /// donde se origino el cambio enviado con this
          function ValidaCantidad(e){
            $(document).ready(function() {
              // apartir de ese elemento buscamos a su padre "td" luego al padre de este "tr"
              // y apartir de aqui buscamos un "td" que tenga un hijo directo "center " y un hijo directo "input "
              // de tipo number  
              let reque = e.parentNode.parentNode.querySelector("td > center > input[type='number']");
              // optenemos su atributo required y le asignamos lo contrario si es false = true y biceversa
             // tambien activamos el input
              reque.required = !reque.required;
              reque.disabled = !reque.disabled;

                  //si es true o sea requerido saltara la alerta
                  if (reque.required) {
                    alert(`el input para ${e.id} esta en modo requerido!`);
                  }
            });
          }
input[type="number"]:disabled{
cursor: not-allowed;
}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table>
            <tr>
                <td>
                    <input type="checkbox" id="prueba1" name="equipo[]" value="1" onchange="ValidaCantidad(this)">
                    <label for="prueba1">prueba1</label>
                </td>

                <td>11.50</td>

                <td>33</td>
                <td>
                    <center>
                        <input type="number" id="quantity" name="quantity" disabled>
                    </center>
                </td>
            </tr>
            
           <tr>
                <td>
                    <input type="checkbox" id="prueba2" name="equipo[]" value="2" onchange="ValidaCantidad(this)">
                    <label for="prueba2">prueba2</label>
                </td>

                <td>15.50</td>

                <td>12</td>
                <td>
                    <center>
                        <input type="number" id="quantity" name="quantity" disabled>
                    </center>
                </td>
            </tr>
            
            
             <tr>
                <td>
                    <input type="checkbox" id="prueba3" name="equipo[]" value="3" onchange="ValidaCantidad(this)">
                    <label for="prueba3">prueba3</label>
                </td>

                <td>5.50</td>

                <td>99</td>
                <td>
                    <center>
                        <input type="number" id="quantity" name="quantity" disabled>
                    </center>
                </td>
            </tr>
        </table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.