Answered by:
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
Tuesday, June 23, 2020 3:52 PM
Answers
-
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>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, June 23, 2020 8:14 PM
All replies
-
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.
Tuesday, June 23, 2020 4:07 PM -
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>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, June 23, 2020 8:14 PM