Change status of any checkbox in a table

Question

Change status of any checkbox in a table

Navigation

#1 by (0 votes)

0

Hello good afternoon this time I come across a detail that I can not solve. When you click on a checkbox you should trigger a function that verifies if a candidate is already associated with a vacancy but what does not go well is that when you detect one that is already linked, a modal is shown indicating that it is already associated and then of that false the property checked. I get the check through the id. I'm excited to see that it does with the first element of the table but if I continue with the others, if they are marked if the modal is activated.

This is the code:

$('#formDatosVacantes').on('change','input[type="checkbox"]',function(){
  var buttons = "";
  var table = $('#tabla').DataTable();

  buttons = table.buttons( ['.asociar'] );

  var idVacantes = $(this).val();

  var idCanPros = <?= json_encode($idCP,JSON_HEX_QUOT | 
                      JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS
                  ) ?>;

  alert(idCanPros);

  $.ajax({
    url: ajaxVerificaVacante,
    type: 'post',
    data: {
      idVacantes : idVacantes,
      idCanPros  : idCanPros,
      _csrf  : _csrfToken
    },
    success: function(data){
      console.log(data);
      if(data.mensajes != 0){
        $("#texto").html(data.mensajes);
        document.getElementById("idVacante").checked = false;
        buttons.disable();
        $('#existeEnVacante').modal('show');
      }
    },
    error: function(exception){
      console.log('error' + exception);
    }
  });

  if(this.checked==true){
    buttons.enable();
  }else{
    buttons.disable();
  }});

Does anyone know what can be done? It's as if it detected only the first checkbox.

javascript ajax

asked by Ivan92 25.11.2017 в 00:05

source

1 answer

How can I add a value to a database from sqlalchemy python? Display data from a table in Android Studio

score 0 · Accepted Answer

Well I see several things in your code:

Since you have a table I guess you have several checkbox and I see in your code that you select them by means of an id.

Remember: When there are several items that are going to share the same name on the site you should use class and not id . The id is a unique and unrepeatable identifier and it is for this reason that your code only works correctly with the first checkbox because when you have several elements with the same id the system will always interact with the first one you find ignoring the rest like that.

If you are using jQuery, why do you use a native JavaScript selector? Just use jQuery from beginning to end.

To check or remove the checked from a checkbox you use the prop() method of jQuery.

Functional example:

NOTE: I added a setTimeout() with a small amount of time so you can see how it is checked and how the checked%% is removed%.

$('#formDatosVacantes').on('change','input[type="checkbox"]',function(){
    setTimeout(function(){
        $(".idVacante").prop('checked', false);
        $('#existeEnVacante').modal('show');
    }, 200);

});

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<table id="formDatosVacantes" class="table">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Check</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Usuario 1</td>
            <td><input type="checkbox" name="" class="idVacante"></td>
        </tr>

        <tr>
            <td>usuario 2</td>
            <td><input type="checkbox" name="" class="idVacante"></td>
        </tr>

        <tr>
            <td>Usuario 3</td>
            <td><input type="checkbox" name="" class="idVacante"></td>
        </tr>

        <tr>
            <td>Usuario 4</td>
            <td><input type="checkbox" name="" class="idVacante"></td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="existeEnVacante" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

And that's how your code should look (remember to change the checkbox of id by checkbox )

$('#formDatosVacantes').on('change','input[type="checkbox"]',function(){
  var buttons = "";
  var table = $('#tabla').DataTable();

  buttons = table.buttons( ['.asociar'] );

  var idVacantes = $(this).val();

  var idCanPros = <?= json_encode($idCP,JSON_HEX_QUOT | 
                      JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS
                  ) ?>;

  alert(idCanPros);

  $.ajax({
    url: ajaxVerificaVacante,
    type: 'post',
    data: {
      idVacantes : idVacantes,
      idCanPros  : idCanPros,
      _csrf  : _csrfToken
    },
    success: function(data){
      console.log(data);
      if(data.mensajes != 0){
        $("#texto").html(data.mensajes);
        $(".idVacante").prop('checked', false);
        buttons.disable();
        $('#existeEnVacante').modal('show');
      }
    },
    error: function(exception){
      console.log('error' + exception);
    }
  });

  if(this.checked==true){
    buttons.enable();
  }else{
    buttons.disable();
  }
});