1

Tengo varias opciones en un formulario de checkboxy un <textarea> Necesito que como mínimo uno de ellos no esté vacío, por ejemplo puede haber solo un checkbox :checked o ninguno en el caso de que el textarea no esté vacío. Lo que tengo es esto pero no funciona:

$('#myBtn_denegar').click(function() {
  var checkerror = 5;
  if ($('#1').is(':checked')) {
    checkerror = checkerror - 1;
  }
  if ($('#2').is(':checked')) {
    checkerror = checkerror - 1;
  }
  if ($('#3').is(':checked')) {
    checkerror = checkerror - 1;
  }
  if ($('#4').is(':checked')) {
    checkerror = checkerror - 1;
  }
  if ($('#5').val(':checked')) {
    checkerror = checkerror - 1;
  }
  if (checkerror == 0) {
    $('#denegar_submit').prop('disabled', false);
  } else {
    $('#denegar_submit').prop('disabled', true);
  }
});
<div class="col-md-2">
  <button id="myBtn myBtn_denegar" class='btn my-btn btn-primary btn-md my-btn'>lightbox</button>
</div>
<div class="modal-body">
  <form action="<?php echo $yomismo; ?>" method="post" class="center-element">
    <center>
      <h3>Seleccione uno o varios motivos</h3>
      <br>
      <input type="hidden" name="accion" value="denegar_ticket">
      <input type="hidden" name="ticket" value="<?php echo $ticket; ?>">
      <input type="checkbox" id="1" class="checkBox hidden" name="1">
      <label for="1" class="checkBoxLabel">1</label>
      <input type="checkbox" id="2" class="checkBox hidden" name="2">
      <label for="2" class="checkBoxLabel">2</label>
      <input type="checkbox" id="3" class="checkBox hidden" name="3">
      <label for="3" class="checkBoxLabel">3</label>
      <input type="checkbox" id="4" class="checkBox hidden" name="4">
      <label for="4" class="checkBoxLabel">4</label>
      <a href="#otro1" class="checkBoxLabel mya" data-toggle="collapse">OTRO</a>
      <br>
      <div id="otro1" class="collapse">
        <strong>Descripcción</strong>
        <textarea id="5" class="form-control" name="5"></textarea>
        <br>
        <br>
      </div>
    </center>
    <input type="submit" class="btn btn-primary">
  </form>
</div>

La idea es que cuando yo le haga click al boón en el que pone lightbox me vaya comprobando so yo selecciono alguna de las opciones o relleno el textarea...

También lo he probado de la siguiente forma:

$("input:checkbox:checked").each(   
    function() {
        alert("El checkbox con valor " + $(this).val() + " está seleccionado");
    }
);
<div class="col-md-2">
  <button id="myBtn myBtn_denegar" class='btn my-btn btn-primary btn-md my-btn'>lightbox</button>
</div>
<div class="modal-body">
  <form action="<?php echo $yomismo; ?>" method="post" class="center-element">
    <center>
      <h3>Seleccione uno o varios motivos</h3>
      <br>
      <input type="hidden" name="accion" value="denegar_ticket">
      <input type="hidden" name="ticket" value="<?php echo $ticket; ?>">
      <input type="checkbox" id="1" class="checkBox hidden" name="1">
      <label for="1" class="checkBoxLabel">1</label>
      <input type="checkbox" id="2" class="checkBox hidden" name="2">
      <label for="2" class="checkBoxLabel">2</label>
      <input type="checkbox" id="3" class="checkBox hidden" name="3">
      <label for="3" class="checkBoxLabel">3</label>
      <input type="checkbox" id="4" class="checkBox hidden" name="4">
      <label for="4" class="checkBoxLabel">4</label>
      <a href="#otro1" class="checkBoxLabel mya" data-toggle="collapse">OTRO</a>
      <br>
      <div id="otro1" class="collapse">
        <strong>Descripcción</strong>
        <textarea id="5" class="form-control" name="5"></textarea>
        <br>
        <br>
      </div>
    </center>
    <input type="submit" class="btn btn-primary">
  </form>
</div>

Pero tampoco hace ningún resultado, lo normal es que por lo menos haga algo cuando se interactua con el checbox no?

...

1 respuesta 1

1

Prueba utilizando un boolean i nota que estas asignando un valor al textarea al hacer

$('#5').val(':checked')

a mi entender con esa condicion no estas comprobando nada, asi que la idea seria algo asi:

$('form').submit(function(e) {
 var checkerror = 0;
 if ($('#1').is(':checked')) {
  checkerror = 1;
  console.log($('#1'));
 }
 if ($('#2').is(':checked')) {
  checkerror = 1;
  console.log($('#2'));
 }
 if ($('#3').is(':checked')) {
  checkerror = 1;
  console.log($('#3'));
 }
 if ($('#4').is(':checked')) {
  checkerror = 1;
  console.log($('#4'));
 }
 if ($('#5').length>1) {
  checkerror = 1;
  console.log($('#5'));
 }

 if (checkerror == 0) {
  alert("Cancelado");
  e.preventDefault();
 } else {
  alert("Guarda");
 }
});

Con eso solo que te cumpla una de las condiciones te servira

Edicion En un principio no lo habia entendido bien, para evitar el submit lo que deberias hacer es usar el evento "preventDefault()", con el prop lo que haces es desabilitar el boton, pero te envia el submit igualmente i te vuelve a recargar la pagina

6
  • Ahora no me da error pero tampoco hace lo que tiene que hacer... Es decir el botón está activo y se puede pulsar aunque no se cumplan las condiciones...
    – Pavlo B.
    Commented el 30 dic. 2016 a las 9:53
  • prueba con las condiciones al reves, es decir invertir los bloques del if(checkerror)
    – AitorFDK
    Commented el 30 dic. 2016 a las 9:56
  • es decir primero el false y luego el true dentro del if? lo he probado y tampoco me funciona... Soy un manazas con esto del jquery xD
    – Pavlo B.
    Commented el 30 dic. 2016 a las 10:02
  • He editado la respuesta, prueba ahora a ver si funciona
    – AitorFDK
    Commented el 30 dic. 2016 a las 10:13
  • 1
    Te paso un jsFiddle donde funciona bien habiendo hecho algun pequeño cambio https://jsfiddle.net/42yh1t4j/
    – AitorFDK
    Commented el 30 dic. 2016 a las 10:24

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.