无法通过 JQuery 更改 RadioButtonFor 选择

Question

我正在编写代码以确定是否显示联系信息部分。为此，我正在为 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 开发人员工具检查时，有两个输入：

<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 及更高版本 - 但它根本不起作用。

Answer 1

首先，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>