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.

Answer 1

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>