ASP.NET中JQuery 3.5.1的name属性单选选择器失效，类选择器正常

我有一组需要监听change事件的单选按钮，在JSFiddle中两种选择器都能正常触发事件，但在ASP.NET项目里只有类选择器能生效。

我的HTML代码： #

<div class="form-check">
  <input class="form-check-input opmode" type="radio" name="opMode" runat="server" id="opModeFull" />
  <label class="form-check-label">Full</label>
</div>
<div class="form-check">
  <input class="form-check-input opmode" type="radio" name="opMode" runat="server" id="opModeMinimal" />
  <label class="form-check-label">Minimal</label>
</div>

JQuery 3.5.1代码： #

// 无法生效
$('input[name=opMode]:radio').change(function() {
  alert('changed');
});

// 可以生效
$('.opmode').change(function() {
  alert('works');
});

问题原因 #

ASP.NET中，带有runat="server"标记的服务器控件，在页面渲染时会被自动修改name属性值——通常会加上父容器的ID前缀（比如ctl00$ContentPlaceHolder1$opMode），导致前端用原始的name=opMode选择器找不到对应的元素。而类属性不会被服务器端修改，所以类选择器能正常匹配到控件并触发事件。

解决办法 #

1. 继续使用类选择器：这是最直接的方案，已经验证可行，无需额外修改。
2. 使用服务器端生成的真实name值：通过ASP.NET的服务器代码输出控件的UniqueID（对应渲染后的name属性），比如：

   $('input[name=<%= opModeFull.UniqueID %>]:radio').change(function() {
     alert('changed');
   });
   

   因为同组单选按钮的渲染后name值一致，取其中一个控件的UniqueID即可。
3. 使用属性包含选择器：匹配包含原始name关键字的元素，适合不想修改服务器端代码的场景，但要注意避免误匹配其他相似name的控件：

   $('input[name*=opMode]:radio').change(function() {
     alert('changed');
   });
   

4. 设置ClientIDMode为Static：在控件上添加ClientIDMode="Static"，强制ASP.NET保留原始的name和ID值，这样原始选择器就能生效：

   <input class="form-check-input opmode" type="radio" name="opMode" runat="server" id="opModeFull" ClientIDMode="Static" />
   

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