如何在前端正确显示根据DB中存储的内容检查或不检查的复选框？

Question

I have a form that has some questions/fields (email, phone number,...) and then the user can select if that field should be included for the registration types that exist for a conference and also if that field should be mandatory or not for each registration type, through checkboxes.

Based on the selected checkboxes the info is inserted in the pivot table "registration_type_questions" that has this structure: registration_type_id, question_id, required.

The database is like this for now:

registration_type_id  question_id  required
    2                   1          1    (include quetion 1 in rt02 and is mandatory)
    1                   2          1    (include quetion 2 in rt01 and is mandatory)
    1                   1          1    (include quetion 1 in rt01 and is mandatory)    

Doubt

I want to show in the frontend the checkboxes checked or not based on what is in the db. Do you know how is possible to check the checkboxes on the frontend based on this db values?

With that db info the frontend should appear like below:

Form:

<table class="table table-striped table-responsive-sm">
    <thead>
    <tr>
        <th scope="col">Questions</th>
        <th scope="col">Include for registration type</th>
        <th scope="col">Mandatory</th>
    </tr>
    </thead>
    <tbody>
    @foreach($question as $q)
        <tr>
            <td>{{$q->question}}</td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            {{$rtype->name}}
                        </label>
                    </div>

                @endforeach
            </td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                               class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            for the registration type "{{$rtype->name}}"
                        </label>
                    </div>
                @endforeach
            </td>
        </tr>
    @endforeach

    </tbody>
</table>

Question Model

class Question extends Model
{

    public function registration_type(){
        return $this->belongsToMany('App\RegistrationType', 'registration_type_questions');
    }
}

Registration type model

class RegistrationType extends Model
{
    public function conference(){
        return $this->belongsTo('App\Conference');
    }

    public function questions(){
        return $this->belongsToMany('App\Question', 'registration_type_questions');
    }
}

Conferece model

class Conference extends Model
{
   // A conference has many registration types
    public function registrationTypes(){
        return $this->hasMany('App\RegistrationType', 'conference_id');
    }
}

Answer 1

In your controller store the relation values to variables and pass it to the view.

foreach($question as $ques) {
    foreach($ques->registration_type as $regType) {
        $optional[$ques->id][$regType->id] = 1;

        if($regType->pivot->required == 1) {
            $required[$ques->id][$regType->id] = 1;
        }
    }
}

pass$optional and required to the view. with the $question.

In your view check whether the current checkbox has relation defined in the varible then make the checkbox property "checked".

@foreach($question as $q)
    <tr>
        <td>{{$q->question}}</td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" 
                        class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($optional[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">
                        {{$rtype->name}}
                    </label>
                </div>
            @endforeach
        </td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                       class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($required[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">for the registration type "{{$rtype->name}}"</label>
                </div>
            @endforeach
        </td>
    </tr>
@endforeach