Jump to content
Kiboko

Pre-Select Custom radio button bootstrap 4

Recommended Posts

Hi, Does anyone know how to pre-select a bootstrap 4 custom radio button.

I have tried adding 'checked' and 'active' to the class but this does not seem to work.

many thanks

nick

Share this post


Link to post
Share on other sites

Hi Nick,

If you're using <input type="radio"> You just need to add the attribute checked to the input you want selected by default.

<input type="radio" checked="checked" />

 

Share this post


Link to post
Share on other sites

Hi Funce,

Many thanks for your quick reply. Actually as mentioned above, I have tried putting checked = "checked", this works fine for a standard radio button, but I am trying to use the Bootstrap 4 custom radio buttons explained at https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp.

The HTML code I'm using is: (razor pages asp.net core 2.2)

<div class="custom-control custom-radio custom-control-inline @Model.LocalActive">
                                    <input type="radio" class="custom-control-input @Model.LocalActive" id="customRadio" name="example" value="Local">
                                    <label class="custom-control-label SIHGYellow @Model.LocalActive" for="customRadio" @Model.LocalChecked>Local</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline @Model.AbroadActive">
                                    <input type="radio" class="custom-control-input @Model.AbroadActive" id="customRadio2" name="example" value="Abroad">
                                    <label class="custom-control-label SIHGYellow @Model.AbroadActive" for="customRadio2" @Model.AbroadChecked>Abroad</label>
                                </div>

and the code behind file is

if(donorDetails.TypeOfDonor == "Local")
            {
                LocalChecked = "checked";
                LocalActive = "active";
                AbroadChecked = string.Empty;
                AbroadActive = string.Empty;
            }
            else
            {
                LocalChecked = string.Empty;
                LocalActive = string.Empty;
                AbroadChecked = "checked";
                AbroadActive = "active";
            }

as you can see, I'm using both 'checked' and 'active' but neither seems to work for me.

Any Ideas?

NIck

Share this post


Link to post
Share on other sites

Seems you are targetting every element but the radio button its intended for?. Target input type radio only with attribute "checked", not "active".

Share this post


Link to post
Share on other sites

Try using the code block to give yourself some syntax highlighting and easy formatting.

XcQfW3F.png

Your issue here is your @Model.LocalChecked and @Model.AbroadChecked are on your Label elements. You'll need to put them on your Input elements for them to work correctly.

On 4/26/2019 at 6:00 PM, Kiboko said:

this works fine for a standard radio button, but I am trying to use the Bootstrap 4 custom radio buttons

Bootstrap custom radio buttons are re-skinned standard radio buttons. As noted in your code.

On 4/26/2019 at 6:00 PM, Kiboko said:

<input type="radio"

Corrected code below:

<div class="custom-control custom-radio custom-control-inline @Model.LocalActive">
  <input type="radio" class="custom-control-input @Model.LocalActive" id="customRadio" name="example" value="Local" @Model.LocalChecked>
  <label class="custom-control-label SIHGYellow @Model.LocalActive" for="customRadio">Local</label>
</div>
<div class="custom-control custom-radio custom-control-inline @Model.AbroadActive">
  <input type="radio" class="custom-control-input @Model.AbroadActive" id="customRadio2" name="example" value="Abroad" @Model.AbroadChecked>
  <label class="custom-control-label SIHGYellow @Model.AbroadActive" for="customRadio2">Abroad</label>
</div>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...