bootstrap 4 Pre-Select Custom radio button bootstrap 4

[Kiboko]

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

[Funce]

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

 

[Kiboko]

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

[dsonesuk]

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

[Funce]

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

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>

 

[Kiboko]

That works perfectly thanks very much indeed.