Unable to change RadioButtonFor selection via JQuery

Question

I am working on code to determine whether or not to show a contact information section. To do this I am implementing the RadioButtonFor html-helper with a boolean value for the MVC view model in Razor.

When the page is loaded I need to change from the default, not to show it, to show it if the HasConflicts model value is true. I am attempting to use JQuery to do this at the page load, but the chosen option will not change.

Here is the Razor section

 <div class="left-col" id="noConflict">
    @Html.RadioButtonFor(m => m.HasConflicts, "false") <strong><em>No Conflict of Interest exists at this time</em></strong>
 </div>
 <div class="right-col" id="yesConflict">
    @Html.RadioButtonFor(m => m.HasConflicts, "true") <strong><em>A Conflict of Interest exists at this time</em></strong>
 </div>

And here is JQuery that I tried to put into the page load, following another answer from the site, and removing the conditional just to see if I even can get the "yesConflict" button to be chosen.

$(function () {        
    $('#yesConflict').prop('checked', true).change();
};

The strangest thing is that the change event DOES take place, so this should be the correct ID, but the button selected on the screen does not change.

I appreciate any input, thanks!

EDIT: I had a request for the HTML output of those RadioButtonFor lines - here it is.

    <div class="left-col" id="noConflict">
        <input checked="checked" data-val="true" data-val-required="The HasConflicts field is required." id="HasConflicts" name="HasConflicts" type="radio" value="false" /> <strong><em>No Conflict of Interest exists at this time</em></strong>
    </div>
    <div class="right-col" id="yesConflict">
        <input id="HasConflicts" name="HasConflicts" type="radio" value="true" /> <strong><em>A Conflict of Interest exists at this time</em></strong>
    </div>

When inspected via IE Developer Tools while running here are the two inputs:

<input name="HasConflicts" id="HasConflicts" type="radio" checked="checked" value="false" data-val-required="The HasConflicts field is required." data-val="true" data-dpmaxz-eid="6">
<input name="HasConflicts" id="HasConflicts" type="radio" value="true" data-dpmaxz-eid="7">

Please let me know if I can be of any further assistance in getting an answer. Everything I've researched says that the JQuery line I put in there should do what I want from JQuery 1.6 and up, using 1.10 - but it's simply not working.

could you show the rendered HTML? `@Html.RadioButtonFor(m => m.HasConflicts, "false")` what is this rendered as HTML etc — Dalin Huang, Jun 05 '17 at 20:31
wouldn't the radiobuttons already have a id call "HasConflicts"? and I think your jquery function isn't targeting the radiobuttons — Monkey_Dev1400, Jun 05 '17 at 21:27
The other ID is so I can put a watch to see which button was chosen. However, if there's another way, or if I can still do that but the solution to the button selection lies in the ID, I'll be glad to see an answer so I can see if I can select a best answer. I'll test this idea out in the meantime. — Evoker, Jun 05 '17 at 21:32

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

First of all, ID are unique

For id="HasConflicts" you should not use it more than once, try to change it to class="HasConflicts" etc, because when you call #HasConflicts it will only target the first one.

Solution to your jQuery code:

You are targeting the parent element, use $('#yesConflict > input') to target the input radio (direct child of #yesConflict), check the following:

Note:

$('#yesConflict input') use space it will find all input inside #yesConflict

$('#yesConflict > input') use > it will only target the direct child of #yesConflict

$(function() {
  $('#yesConflict > input').prop('checked', true).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-col" id="noConflict">
  <input checked="checked" data-val="true" data-val-required="The HasConflicts field is required." id="HasConflicts" name="HasConflicts" type="radio" value="false" /> <strong><em>No Conflict of Interest exists at this time</em></strong>
</div>
<div class="right-col" id="yesConflict">
  <input id="HasConflicts" name="HasConflicts" type="radio" value="true" /> <strong><em>A Conflict of Interest exists at this time</em></strong>
</div>

Using the > to target the input did the trick. Thanks, really helped out in a thorny position. As far as the ID being used in both RadioButtonFor lines, I was taking guidance from this question's most popular answer. Is it perhaps something that HTML helper needs to work with the MVC view model? https://stackoverflow.com/questions/8111942/asp-net-mvc3-checking-radio-button-based-on-model — Evoker, Jun 05 '17 at 22:21
@Evoker not sure about asp MVC but ID should always be unique (separate page have the same ID is ok) as long as they are not on the same page. If the id generated out of your control just leave it =D — Dalin Huang, Jun 05 '17 at 23:19
Thank you, great advice. Sometimes I wonder if the Razor HTML helpers are a blessing or a curse. :) — Evoker, Jun 05 '17 at 23:29

Unable to change RadioButtonFor selection via JQuery

1 Answers1