Laravel Radio Button unchecked

Question

when i'm trying to check an option it the other options suppose to be unchecked automatically but it's not also i try to uncheck option manually but it doesn't work

NOTE

i can't use the same name because each role have his own id i want user just select 1 option

code

<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>

HTML101 Use the same name if you want radio groups: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio — brombeer, Mar 02 '20 at 10:43
i can't use the same name because each role have his own id i want user just select 1 option — Hamad Essa, Mar 02 '20 at 11:02
What? That's _why_ you use the same name, so they are grouped and the user can only select one of them — brombeer, Mar 02 '20 at 11:03

hhelderneves · Answer 1 · 2020-03-02T10:52:12.900

as @kerbholz said, radio groups should have the same name. See example below:

<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>

Now, process the inputs in the controller as you want/need.

@kerbholz, thanks, i was copy-pasting :D I don't think he will need ID's but, ye, you are right! — hhelderneves, Mar 02 '20 at 10:52
i can't use the same name because each role have his own id i want user just select 1 option — Hamad Essa, Mar 02 '20 at 11:02
@HamadEssa, that's the least of your problems. In your controller you can check this... — hhelderneves, Mar 02 '20 at 11:03

score 0 · Answer 2 · answered Mar 02 '20 at 10:53

Do like that

<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>

i can't use the same name because each role have his own id i want user just select 1 option — Hamad Essa, Mar 02 '20 at 11:02
You can't do that , please check this https://www.w3schools.com/tags/att_input_type_radio.asp — Lalit Kumar, Mar 02 '20 at 11:09

Rashed Rahat · Answer 3 · 2020-03-02T11:05:48.753

Use the same value of attribute name for all the radio input fields instead of using different name

<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>

i cant use the same name because each role have his own id i want user just select 1 option — Hamad Essa, Mar 02 '20 at 11:00
As far as i know that you have to use the same name. The reason is You can't let user to select any one option out of three until you give the same name. If you assign different value of name then more than one radio button can be selected. Hope you understand the fact. To achieve your goal assign the value attribute with Admin, Editor & User respectively. Have a look at my solution i have posted. — Rashed Rahat, Mar 02 '20 at 11:10

Lokesh Suman · Answer 4 · 2020-03-02T11:32:25.970

To create a radio box it is necessary to use the same name for all radio input fields. If you don't want to give the same name to your radio boxes then you have another option create custom radio boxes with 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);
}

Hope it works...

UPDATE

Use following jQuery code

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

Example URL

Could you please give me the full code of this example? – Hamad Essa Mar 02 '20 at 11:18 — Hamad Essa, Mar 02 '20 at 11:18
@HamadEssa I have updated my answer please take a look – Lokesh Suman Mar 02 '20 at 11:35 — Lokesh Suman, Mar 02 '20 at 11:35

Laravel Radio Button unchecked

4 Answers4

UPDATE