javascript - 无法通过JQuery更改RadioButtonFor选择

我正在研究确定是否显示联系信息部分的代码。为此，我使用Razor中的MVC视图模型的布尔值实现RadioButtonFor html-helper。

加载页面后，如果HasConflicts模型值为true，则需要更改默认值而不是显示它，以显示它。我正在尝试使用JQuery在页面加载时执行此操作，但是所选选项不会更改。

这是剃刀区

 <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>

这是我尝试放入页面加载中的JQuery，跟随网站上的另一个答案，并删除条件语句只是为了看看我是否可以选择“ yesConflict”按钮。

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

最奇怪的是发生更改事件，因此它应该是正确的ID，但是在屏幕上选择的按钮不会更改。

感谢您的投入，谢谢！

编辑：我对那些RadioButtonFor行的HTML输出有一个请求-在这里。

    <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>

当在此处运行时通过IE Developer Tools检查时，有两个输入：

<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">

请让我知道我是否可以在寻求答案方面获得更多帮助。我研究的所有内容都表明，我放入的JQuery行应该使用1.10执行我希望从JQuery 1.6及更高版本进行的操作-但这根本行不通。

最佳答案

首先，ID是唯一的

对于id="HasConflicts"，您不应多次使用它，请尝试将其更改为class="HasConflicts"等，因为当您调用#HasConflicts时，它将仅针对第一个。

jQuery代码的解决方案：

您要定位父元素，使用$('#yesConflict > input')定位输入单选（#yesConflict的直接子元素），请检查以下内容：


  注意：
  
  $('#yesConflict input')使用空间，它将在#yesConflict中找到所有输入
  
  $('#yesConflict > input')使用>，它将仅定位#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>