使用jQuery无法勾选单选按钮的问题排查

可能的问题点及修复方案： #

1. JS执行时机过早，DOM元素未加载
   你的JS代码如果直接写在页面头部，会在单选按钮元素还没渲染完成时执行，导致$("#USD")找不到目标元素，prop()方法自然无法生效。
   修复：把代码包裹在$(document).ready()中，确保DOM完全加载后再执行逻辑：

   $(document).ready(function() {
     var currency = '@ViewBag.Currency'; // 还原后端取值逻辑
     console.log(currency);
   
     if (currency == "USD") {
       $("#USD").prop("checked", true).trigger("change");
       $("#SGD").prop("checked", false).trigger("change");
       console.log("true");
     } else {
       $("#USD").prop("checked", false).trigger("change");
       $("#SGD").prop("checked", true).trigger("change");
       console.log("false");
     }
   });
   

2. 判断逻辑与单选按钮的value不匹配
   你JS中判断的是currency == "USD"，但USD单选按钮的value属性是0，SGD是1。如果后端ViewBag.Currency实际返回的是0或1（而非字符串"USD"），判断条件就完全错误，自然选不中正确按钮。
   修复方案二选一：

   • 修改单选按钮的value值，与判断字符串匹配：

     <input type="radio" id="USD" asp-for="Currency" class="custom-control-input" value="USD" required>
     <input type="radio" id="SGD" asp-for="Currency" class="custom-control-input" value="SGD">
     

   • 调整JS判断逻辑，匹配按钮的value数值：

     var currency = '@ViewBag.Currency'; // 假设后端返回0或1
     if (currency == "0") {
       $("#USD").prop("checked", true).trigger("change");
       $("#SGD").prop("checked", false).trigger("change");
     } else {
       $("#USD").prop("checked", false).trigger("change");
       $("#SGD").prop("checked", true).trigger("change");
     }
     

3. Bootstrap自定义控件需同步样式
   你用的是Bootstrap的custom-control自定义单选按钮，这类控件的选中外观依赖label的状态，仅设置input的checked属性不会自动更新样式。需要手动触发change事件，让框架同步更新界面，也就是代码中的.trigger("change")。

4. ASP.NET Core TagHelper自动覆盖选中状态
   由于使用了asp-for="Currency"，如果后端Model的Currency字段已有值（比如0或1），TagHelper会在服务器端自动给对应单选按钮加上checked属性，可能覆盖JS的设置。
   修复：要么在后端直接设置Model.Currency为目标值，让TagHelper自动渲染选中状态，无需JS；要么确保JS代码在页面最后执行（或用ready事件），覆盖服务器端生成的checked属性。

内容的提问来源于stack exchange，提问作者shean