Materialize: Radio buttons not working...clicking on them does not do anything

[curioustolearn]

This is the relevant html div. I have formatted part of it to make it readable. If I comment out the materialize css script in my html file, everything works fine. However, with materialize script included the radio buttons do not respond to clicks.

<div>
<div>
   <p id="q1">1.   If you earn 1000GD per month, your total profit in the game will be:</p>
     <form action="#">
         <input type="radio" name="q1" value="1" id="q_1_1"><label>5,000GD</label><br>
         <input type="radio" name="q1" value="2" id="q_1_2"><label>10,000GD</label><br>
        <input type="radio" name="q1" value="3" id="q_1_3"><label>12,000GD</label><br>
        <input type="radio" name="q1" value="4" id="q_1_4"><label>15,000GD</label><br>
    </form></div><div><p id="q2">2.   How often can you change the price?
</p><form action="#"><input type="radio" name="q2" value="1" id="q_2_1"><label>Once a month</label><br><input type="radio" name="q2" value="2" id="q_2_2"><label>Once every 6 months</label><br><input type="radio" name="q2" value="3" id="q_2_3"><label>Once a year</label><br></form></div><div><p id="q3">3.   You must change the price every month.</p><form action="#"><input type="radio" name="q3" value="1" id="q_3_1"><label>False. I can, but I don't have to change the price every month. I can continue
    with the same price I chose in the previous month.</label><br><input type="radio" name="q3" value="2" id="q_3_2"><label>True, I have to change the price once a month.</label><br></form></div></div>

[Nohinn]

The labels should have an attribute 'for' pointing to the id of the radio it belongs.
<input type="radio" name="q1" value="1" id="q_1_1"><label for="q_1_1">5,000GD</label>

[curioustolearn]

Thank Nohinn. That works!

However, I would like to point out that the "for" attribute is not necessary for radio buttons to be clickable when not using materialize.

[Dogfalo]

Please also check closed issues before opening a new one

[gunjan008]

Make the radio button static (apply style position=static). It will work

[coolternet]

nothing work..

http://45.42.122.3:82/20170817/contact.php

[gunjan008]

Its working if you remove classes 'input-field col m6 s12' from your parent div. If u r doing like this.

<div class="" style="margin-top: 0px;">
                        <p>
                            <input type="radio" id="seller">
                            <label for="seller">Département des ventes</label>
                        </p>
                        <p>
                            <input type="radio" id="support" value="support@evolution-network">
                            <label for="support">Support Technique</label>
                        </p>
                        <p>
                            <input type="radio" id="info" value="info@evolution-network">
                            <label for="info">Renseignements généraux</label>
                        </p>
                        <input type="radio" name="q1" value="1" id="q_1_1"><label for="q_1_1">5,000GD</label>
                    </div>

[pravan]

Thank you @gunjan008. Removing the input-field class from the parent div works. This happened to me for both radio buttons and select tag.

[St3ph-fr]

thanks @gunjan008 removing class of parent div works like a charm.

[teja2866]

please use the below video link to resolve the issue
https://youtu.be/-AO5unPo0Rw

[Dev-Pawar]

please use the below video link to resolve the issue
https://youtu.be/-AO5unPo0Rw

This guy is advertising his youtube video here. block like this guy.

[mgodu01]

I have same problem, on parent class I had lineheight, when removed it worked
I am not sure abt the relationship between lineheight and radio button :(

[tthomasagg]

.input-field label implements pointer-events: none . Setting it to pointer-events: inherit or removing it seems to work in this case.
But my guess is using .input-field to wrap radio inputs is wrong in the first place.