无法通过 JQuery 更改 RadioButtonFor 选择

Question

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

加载页面时，我需要更改默认设置，不显示它，如果 HasConflicts 模型值为真则显示它。我正在尝试使用 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 的直接子元素），检查以下内容：

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>

无法通过 JQuery 更改 RadioButtonFor 选择

Unable to change RadioButtonFor selection via JQuery

javascript

asp.net-mvc

jquery

html-helper

razor