Control of active checkboxes (checked) with jquery?

Question

Control of active checkboxes (checked) with jquery?

Navigation

#1 by (1 votes)

1

I have several options in a form of checkbox and a <textarea> I need at least one of them not to be empty, for example there may be only a checkbox :checked or none in the case of that the textarea is not empty. What I have is this but it does not work:

$('#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>

The idea is that when I click on the boon where you put the lightbox, I'll check to see if I select any of the options or fill in the textarea ...

I have also tested it in the following way:

$("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>

But it does not make any results either, the normal thing is that at least it does something when it interacts with the checbox, no?

...

jquery html

asked by Pavlo B. 30.12.2016 в 10:08

source

1 answer

How to make an SQL server select that only takes Random list sound

score 1 · Accepted Answer

Try using a boolean and note that you are assigning a value to textarea when doing

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

to my understanding with that condition you are not checking anything, so the idea would be something like this:

$('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");
 }
});

With that only if you meet one of the conditions will serve you

Edition At first I had not understood it well, to avoid the submit what you should do is use the event "preventDefault ()", with the prop what you do is disable the button, but I send you the submit also i will reload the page