Search code examples
materialize

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

I have a input radio button with two different id tied to it

<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>

I tried this approach...

<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>

tried this approach too...

<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 of them seem to allow the user to select the second radio button, any guidance on what I might be doing wrong?

Solution

  • Found the solution, as @light pointed out I was using the same id for both. So I made the id's dynamic and used jquery to listen to events on elements that are not in the DOM yet.

    base.html code changed to ...

    <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 code changed to ...

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