How do you get inside the Modal as the data in the database leaves input checkbox (checked)?

Question

On my Table in Products in my BD has the field Lawsuits

and I made a modal so that the person marks the processes in which the piece may come to suffer, each letter corresponds to a process, corresponding to the first letter, example C. = Court, D. = Bending, S. = Soldering, CA. = Calender, M. = Assembly, P. = Painting

Example:

I made a table where lists all products and with an edit button to open a modal, as shown below

<table id="tabela1" class="table table-bordered table-striped table-hover tabela2">
    <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>Grupos</th>
            <th>Códigos</th>
            <th>Revisão</th>
            <th>Descrição</th>
            <th>Ação</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($produtos as $produto)
        <tr>
            <td>{{ $produto->id }}</td>
            <td>{{ $produto->gruposdescricao}}</td>
            <td>{{ $produto->codigo }}</td>
            <td>{{ $produto->revisao }}</td>
            <td><a href="#" data-target="#viewModal{{ $produto->id }}" data-toggle="modal">{{ $produto->descricao }}</a>
            </td>
            <td>
                <a href="#" class="text-success"><i class="fas fa-eye fa-lg view" id="view"></i></a> &nbsp &nbsp
                <a href="#"><i class="fas fa-edit fa-lg editarProduto" id="editarProduto" data-target="#editModal"
                        data-toggle="modal" data-whatever="{{ $produto->processos }}"></i></a>
            </td>
            @endforeach
    </tbody>
</table>

Using as an example the ID 1 his process is C.D.P.M.

When opening modal screen to edit the process I would need to appear the marked items. As in the example above, it has to appear marked as the image below.

I’m using the bootstrap example https://getbootstrap.com/docs/4.0/components/modal/#Varying-modal-content

in the field data-whatever="C.D.P.M" as each item in a table.

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)

  modal.find('#processos').val(recipient)
})

From now on I couldn’t make the corresponding checkbox of each letter appear marked.

Someone can help me, thank you.

Answer 1

Since you have not shown modal HTML code with checkboxes, whereas checkboxes have value with the letters of the words (e.g., value="C" to "Cut"), just convert the value of data-whatever array with .split(".") and then go through the array with .map() searching in the modal the checkboxes that have the values that match the letters and mark them:

$('#exampleModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget) // Button that triggered the modal
   var recipient = button.data('whatever') // Extract info from data-* attributes
   // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
   // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
   var modal = $(this);
   
   recipient.split(".")
   .filter(function(e){ return e }) // remove valores vazios
   .map(function(e){
      modal
      .find(":checkbox[value='"+e+"']")
      .prop("checked", true);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="C.D.P.M.">Abrir modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form>
            <input type="checkbox" value="C"><label>Corte</label>
            <input type="checkbox" value="D"><label>Dobrar</label>
            <input type="checkbox" value="S"><label>Solda</label>
            <input type="checkbox" value="U"><label>Usinagem</label>
            <input type="checkbox" value="CA"><label>Calandrar</label>
            <input type="checkbox" value="E"><label>Estampar</label>
            <input type="checkbox" value="P"><label>Pintura</label>
            <input type="checkbox" value="M"><label>Montagem</label>
        </form>
      </div>
    </div>
  </div>
</div>