Jump to content

Pre-Select Custom radio button bootstrap 4


Kiboko
 Share

Recommended Posts

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

 

Link to comment
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

Link to comment
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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...