Bootstrap radio buttons inside my asp.net core mvc are shown as disabled

Question

User-540818677 posted

I have the following code inside my asp.net mvc core web application to show 2 radio buttons:-

<div class="form-group">
                      
                        <label class="control-label" style="font-weight:bold">@Model.SubmissionQuestion[i].Question</label><br/>
                       
                        <div class="custom-control custom-radio"> 
                        <input type="radio" asp-for="@Model.SubmissionQuestionSubmission[i].Answer" value="true"  class="custom-control-input" />
                        <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">Yes</label>
                        </div>
                        
                        <div class="custom-control custom-radio">
                        <input type="radio" asp-for="@Model.SubmissionQuestionSubmission[i].Answer" value="false" class="custom-control-input"/>
                        <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">No</label>
                        </div>

</div>

which will generates the following markup:-

<label class="control-label" style="font-weight:bold">Are you currently ...?</label><br>
               
                <div class="custom-control custom-radio"> 
                <input type="radio" value="true" class="custom-control-input" name="SubmissionQuestionSubmission[0].Answer" id="SubmissionQuestionSubmission_0d__Answer">
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">Yes</label>
                </div>
                <div class="custom-control custom-radio">
                <input type="radio" value="false" class="custom-control-input" id="SubmissionQuestionSubmission_0__Answer" name="SubmissionQuestionSubmission[0].Answer">
                <label class="custom-control-label" style="color: #7e7e7e;font-size:14px;font-weight:bold">No</label>
                </div>

but the radio button i got will not be select-able (as-if they are disabled),, any idea what is going on?

Thanks

Answer 1

User475983607 posted

I recommend reading the following blog.

https://www.learnrazorpages.com/razor-pages/forms/radios

It explains how HTML radio button work in general and how to properly use tag helper to create the HTML.

Answer 2

User-474980206 posted

the buttons are selectable. the color for the labels looks disabled, and as the labels do not have a for attribute, so they don't select the radio button.  try:

<div class="custom-control custom-radio"> 
    <input type="radio" 
        id="@("yes" + i.ToString())"
        asp-for="@Model.SubmissionQuestionSubmission[i].Answer" 
        value="true"  class="custom-control-input" 
    />
    <label 
        for="@("yes" + i.ToString())"
        class="custom-control-label" 
        style="color: #7e7e7e;font-size:14px;font-weight:bold"
    >Yes</label>
</div>

<div class="custom-control custom-radio">
    <input type="radio" 
        id="@("no" + i.ToString())"
        asp-for="@Model.SubmissionQuestionSubmission[i].Answer" 
        value="false" class="custom-control-input"
    />
    <label 
        for="@("no" + i.ToString())"
        class="custom-control-label" 
        style="color: #7e7e7e;font-size:14px;font-weight:bold"
    >No</label>
</div>