The duo selection buttons created with the HTML helper are malfunctioning

I have encountered an issue with my HTML form in an ASP.NET MVC project that uses two radio buttons.

Below is a snippet of my model:

[Display(Name = "Gender")]
public string gender { get; set; }

In the view, I am using HTML helpers to declare these radio buttons:

<label class="col-sm-3 control-label">@Html.LabelFor(a => a.gender)</label>
<div class="col-sm-9 row">
    <div class="radio-btn pull-left mRight-20">
        @Html.RadioButtonFor(model => model.gender, "male")
        @Html.LabelFor(a => a.gender, "Male")
    </div>
    <div class="radio-btn pull-left">
        @Html.RadioButtonFor(model => model.gender, "female")
        @Html.LabelFor(a => a.gender, "Female")
    </div>
</div>

The problem I am facing is that only the male radio button is clickable. When I try to click on the female radio button, it also selects the male option. Any insights into why this might be happening?

Answer №1

The reason for this issue is the for attribute of the label control. To fix this problem, you can implement the following code:

<label class="col-sm-3 control-label">@Html.LabelFor(a => a.gender)</label>
        <div class="col-sm-9 row">
            <div class="radio-btn pull-left mRight-20">
                @Html.RadioButtonFor(model => model.gender, "male", new { @id="genderMale"})
                <label for="genderMale">Male</label>
            </div>
            <div class="radio-btn pull-left">
                @Html.RadioButtonFor(model => model.gender, "female", new { @id = "genderFemale" })
                <label for="genderFemale">Female</label>
            </div>
        </div>

In addition, if the radio button is not checked, it may be because it is connected to the Model. Therefore, if you set the gender value in the model with something like

 Model.gender = "male";
, then the corresponding radio button will be assigned the value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can the Multi-tiered Dropdown Menu be Enhanced?

I am in search of creating a multi-level accordion menu. I have developed this menu ( http://codepen.io/anon/pen/ogdovx ) until now but I am fairly new to jquery and feeling stuck when it comes to advancing it further. How can I enhance this? My requireme ...

PHP allows for easy looping through an array based on certain conditions. By incorporating

Can anyone assist me in creating an HTML div using an array loop? Here is how my array looks: $myarray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]; This is the structure of my PHP file: <?php foreach ($myarray as $arr) { // ...

I noticed that my Stack Slider text is appearing blurry, and the navigation seems to be not looping properly

I have implemented the stack slider plugin for my website, which can be found at this link: https://github.com/dpesofficial/stack-slider Although most of the changes I made in HTML and CSS are working correctly, there are a few issues that need to be addr ...

Assigning HTML elements to their corresponding source file

Issue We are currently working on a large project that includes numerous Partial Views and utilizes Knockout.js for client side data binding. One challenge we are facing is identifying the source of elements displayed on our pages, particularly when tryi ...

"triggering passcode verification with a click of a React

Struggling with a React issue and seeking help. I've been following a tutorial on YouTube, working in CodeSandbox. Whenever I click the button, an error pops up. Can anyone assist me in resolving this? Here is a snippet of my code: Link to my CodeSan ...

Issues with Django URLs functioning incorrectly in templates

Currently, I am in the process of developing a social networking website that allows users to post content and interact with other posts by liking them. However, I encountered an issue on one of my templates where the heart icon, which signifies whether a ...

Creating a perpetual loop animation for two divs moving from right to left endlessly

Here is the code I have: HTML <div class="screen screen1"></div> <div class="screen screen2"></div> CSS .screen{ width: 100%; height: 50%; position: absolute; background-color:#001; background-image: radial- ...

Ways to attach jQuery live to the entire window?

tag: I want to trigger specific functions whenever the mouse moves, regardless of its position on the browser window. Currently, I am using the following code snippet: $('html').on('mousemove', function(e) { ... } However, this appr ...

Leveraging font display functionality while incorporating a Typekit URL

Pagespeed is giving me a warning, Make sure text remains visible during webfont load I have been researching how to fix this problem and I found people suggesting to include the font-display: fallback argument in the font declaration block. However, I ...

Implementing a function in ReactJS that is activated by multiple buttons

Apologies for the unclear title. My issue revolves around having three different button tags, each of which should send a unique argument to the function selectSupplier(). However, no matter which button is clicked, only the last value ("ultramar") is be ...

Troubleshooting CSS compatibility problems in Firefox

My DIV element is experiencing alignment issues specifically in Firefox. While it appears correctly aligned in Chrome, Safari, and IE, it seems to be too far left in Firefox. I've been unable to get it to align properly with the images below. Any sugg ...

Boundary around an object within a unified picture

I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be re ...

Switch up the styling in Angular 2+ depending on the current route

I am currently working on creating a tab menu using Angular (v2.4.5). The active tab is determined by the route. Here are some example routes: const routes: Routes = [ { path: 'tab1', component: Tab1Component, }, { path: &apos ...

Guide on Establishing Data or Entity Relationship within a Single Table and Connecting it with a Second Table after Joinging the First Table

I've encountered a challenge while trying to establish data or entity relationships within the same table and connecting another table to the initial inner joined table. My desired query result: SELECT [n].[ISCInstanceId], [n].[NavPointId], [n].[Pare ...

Struggling to make divs reach the bottom of the page? Check out my jsFiddle for a solution!

I'm facing difficulty in extending the left and right divs to the bottom of the page, with no additional space above or below. You can view my progress here: http://jsfiddle.net/qggFz/26/ Appreciate any help, Dale ...

Is there a way to eliminate the default Tab indicator in Materializecss?

Utilizing the tab feature in MaterializeCSS to enhance the navigation tabs for my web application. By default, the initial tab is already chosen, evident by the underlined indicator beneath it as depicted in the image below. https://i.sstatic.net/PbGb5.pn ...

The values in my array are causing it to output NAN

I'm currently working on a program that aims to combine a variable number of one-row matrices with varying lengths. The goal is to add the elements of each matrix together, where element one of array one adds to element one of array two, and so forth. ...

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

Using jinja2 and HTML to convert a numpy array integer to HTML

I'm struggling with converting a numpy.array integer table to HTML/Jinja2 In my Python application, I initialized the variable as "contingency_table" The original table is defined as: contingency_table=np.zeros((6,6), dtype=int) However, it isn&ap ...

What is the best way to display a 404 error page for a nonexistent child page on a WordPress site?

After building our site with WordPress, I noticed that non-existent child page routes are not being redirected. For instance, let's say we have a page called about-us with the URL http://example.com/about-us. If I try to access a non-existing child p ...