当有两个 ID 时，无法在 MaterializeCSS 中使用 select 单选按钮

Question

我有一个输入单选按钮，绑定了两个不同的 ID

<input type="radio" checked id="setProxyBtn" data-profileid="direct"/>
<label for="setProxyBtn">direct</label>
<input type="radio" checked id="setProxyBtn" data-profileid="fixed_servers"/>
<label for="setProxyBtn">fixed_servers</label>

我试过这个方法...

<input type="radio" checked id="setProxyBtn" data-profileid="direct"/>
<label for="direct">direct</label>
<input type="radio" id="setProxyBtn" data-profileid="fixed_servers"/>
<label for="fixed_servers">fixed_servers</label>

也尝试过这种方法...

<input type="radio" checked id="setProxyBtn" data-profileid="direct"/>
<label for="setProxyBtn direct">direct</label>
<input type="radio" id="setProxyBtn" data-profileid="fixed_servers"/>
<label for="setProxyBtn fixed_servers">fixed_servers</label>

None 其中似乎允许用户 select 第二个单选按钮，关于我可能做错了什么的任何指导？

Answer 1

您是否尝试过添加 name 属性？

<input type="radio" name="radioButtonGroup" checked id="setProxyBtn" data-profileid="direct"/>
<label for="direct">direct</label>
<input type="radio" name="radioButtonGroup" id="setProxyBtn" data-profileid="fixed_servers"/>
<label for="fixed_servers">fixed_servers</label>

来源：https://materializecss.com/radio-buttons.html

Answer 2

找到了解决方案，正如@light 指出的那样，我对两者都使用了相同的 ID。因此，我将 id 设为动态并使用 jquery 来监听尚未在 DOM 中的元素上的事件。

base.html 代码更改为 ...

<input type="radio" checked id="setProxyBtn_direct" data-profileid="direct"/>
<label for="setProxyBtn">direct</label>
<input type="radio" checked id="setProxyBtn_'+profileId+'" data-profileid="'+profileId+'"/>
<label for="setProxyBtn_'+profileId+'">'+profile_desc+'</label>

base.js 代码更改为 ...

$(document).on('click', '[id^=setProxyBtn_]', function(){

当有两个 ID 时，无法在 MaterializeCSS 中使用 select 单选按钮

Unable to select radio button in MaterializeCSS when there are two IDs

materialize