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

Question

我正在编写代码以确定是否显示联系信息部分。为此，我正在为 Razor 中的 MVC View 模型实现带有 bool 值的 RadioButtonFor html 助手。

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

这是 Razor 部分

 <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') 定位输入 radio (#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>