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

  • 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