Laravel переключатель не отмечен

Question

когда я пытаюсь проверить опцию, другие опции предполагают автоматическую проверку, но это не так, я также пытаюсь снять опцию вручную, но она не работает

ПРИМЕЧАНИЕ

Я не могу использовать одно и то же имя, потому что у каждой роли есть свой идентификатор. Я хочу, чтобы пользователь просто выбрал 1 вариант

код

<div class="col-12">
                            <div class="custom-control custom-radio mb-5">
                                <input class="custom-control-input" type="radio" name="admin" id="example-radio1" value="option1"{{$user->hasRole('Admin') ? 'checked' : ''}}>
                                <label class="custom-control-label" for="example-radio1">Admin</label>
                            </div>
                            <div class="custom-control custom-radio mb-5">
                                <input class="custom-control-input" type="radio" name="editor" id="example-radio2" value="option1"{{$user->hasRole('Editor') ? 'checked' : ''}}>
                                <label class="custom-control-label" for="example-radio2">Editor</label>
                            </div>
                            <div class="custom-control custom-radio mb-5">
                                <input class="custom-control-input" type="radio" name="user" id="example-radio3" value="option1"{{$user->hasRole('User') ? 'checked' : ''}}>
                                <label class="custom-control-label" for="example-radio3">User</label>
                            </div>
                        </div>

Answer 1

Используйте одно и то же значение атрибута name для всех полей ввода radio вместо использования другого имени

<div class="col-12">
        <div class="custom-control custom-radio mb-5">
            <input class="custom-control-input" type="radio" name="role_type" id="example-radio1"
                   value="Admin"{{$user->hasRole('Admin') ? 'checked' : ''}}>
            <label class="custom-control-label" for="example-radio1">Admin</label>
        </div>
        <div class="custom-control custom-radio mb-5">
            <input class="custom-control-input" type="radio" name="role_type" id="example-radio2"
                   value="Editor"{{$user->hasRole('Editor') ? 'checked' : ''}}>
            <label class="custom-control-label" for="example-radio2">Editor</label>
        </div>
        <div class="custom-control custom-radio mb-5">
            <input class="custom-control-input" type="radio" name="role_type" id="example-radio3"
                   value="User"{{$user->hasRole('User') ? 'checked' : ''}}>
            <label class="custom-control-label" for="example-radio3">User</label>
        </div>
    </div>

Answer 2

, как сказал @kerbholz, радиогруппы должны называться одинаково. См. Пример ниже:

<div class="col-12">
        <div class="custom-control custom-radio mb-5">
                <input class="custom-control-input" type="radio" name="role" id="role-admin" value="admin"{{$user->hasRole('Admin') ? 'checked' : ''}}>
                <label class="custom-control-label" for="role-admin">Admin</label>
        </div>
        <div class="custom-control custom-radio mb-5">
                <input class="custom-control-input" type="radio" name="role" id="role-editor" value="editor"{{$user->hasRole('Editor') ? 'checked' : ''}}>
                <label class="custom-control-label" for="role-editor">Editor</label>
        </div>
        <div class="custom-control custom-radio mb-5">
                <input class="custom-control-input" type="radio" name="role" id="role-user" value="user"{{$user->hasRole('User') ? 'checked' : ''}}>
                <label class="custom-control-label" for="role-user">User</label>
        </div>
        </div>
</div>

Теперь обработайте входы в контроллере так, как вы хотите / нуждаетесь.

Answer 3

Для создания радиоблока необходимо использовать одно и то же имя для всех полей радиовхода. Если вы не хотите давать одно и то же имя вашим радиоблокам, у вас есть еще один вариант: создать собственные радиоблоки с jquery

if($('input[name="admin"]').is(':checked')) {
    $(this).prop('checked',true);
    $('input[name="editor"]').prop('checked',false);
    $('input[name="user"]').prop('checked',false);
} else if($('input[name="editor"]').is(':checked')) {
    $(this).prop('checked',true);
    $('input[name="admin"]').prop('checked',false);
    $('input[name="user"]').prop('checked',false);
} else if($('input[name="user"]').is(':checked')) {
    $(this).prop('checked',true);
    $('input[name="admin"]').prop('checked',false);
    $('input[name="editor"]').prop('checked',false);
}

Надеюсь, что это работает ...

ОБНОВЛЕНИЕ

Используйте следующий jQuery код

$(".custom-control-input").click(function(){
    var group = "input[name='"+$(this).attr("name")+"']";
    $(group).attr("checked",false);
    $(this).attr("checked",true);
});

Пример URL

Answer 4

Делай так

<div class="col-12">
                                <div class="custom-control custom-radio mb-5">
                                    <input class="custom-control-input" type="radio" name="check" id="example-radio1" value="option1"{{$user->hasRole('Admin') ? 'checked' : ''}}>
                                    <label class="custom-control-label" for="example-radio1">Admin</label>
                                </div>
                                <div class="custom-control custom-radio mb-5">
                                    <input class="custom-control-input" type="radio" name="check" id="example-radio2" value="option1"{{$user->hasRole('Editor') ? 'checked' : ''}}>
                                    <label class="custom-control-label" for="example-radio2">Editor</label>
                                </div>
                                <div class="custom-control custom-radio mb-5">
                                    <input class="custom-control-input" type="radio" name="check" id="example-radio3" value="option1"{{$user->hasRole('User') ? 'checked' : ''}}>
                                    <label class="custom-control-label" for="example-radio3">User</label>
                                </div>
                            </div>