CODEWITHSUNDEEP
javascripthtml
North
North

Reputation: 25

disable button when no radio button is clicked

So I have a bunch of radio button and I want to make it so that if no radio button is clicked, the submit button is disabled. I found this javascript online but it is not working. It's only working for one radio button only

HTML

<div class="pilihansoalan">
                <br>
                <input type="radio" value="<?php echo $soalan['jawapan_a'];?>" name="pilihan" id="boxpilihan-1"/>
                <label class="boxpilihan-1" for="boxpilihan-1"><?php echo $soalan['jawapan_a'];?></label>

                <input type="radio" value="<?php echo $soalan['jawapan_b'];?>" name="pilihan" id="boxpilihan-2"/>
                <label class="boxpilihan-2" for="boxpilihan-2"><?php echo $soalan['jawapan_b'];?></label>
                </br>
                <br>
                <input type="radio" value="<?php echo $soalan['jawapan_c'];?>" name="pilihan" id="boxpilihan-3"/>
                <label class="boxpilihan-3" for="boxpilihan-3" ><?php echo $soalan['jawapan_c'];?></label>

                <div>
                <input type="radio" value="<?php echo $soalan['jawapan_d'];?>" name="pilihan" id="boxpilihan-4"/>
                <label class="boxpilihan-4" for="boxpilihan-4"><?php echo $soalan['jawapan_d'];?></label>
                </div>
                </br>
                
                <button type="submit" form="form1" value="Pilih" disabled="disabled" class="pilihbutton">Pilih</button>

JS

$(function(){
                $("input[type='radio']").change(function(){
                $("button[type='submit']").prop("disabled", false);
                });
                });

Upvotes: 0

Views: 166

Answers (2)

Darshil Dave
Darshil Dave

Reputation: 111

There is a wrong class attribute defined for the submit button in the HTML code. class="pilihbutton" ="pilihan" instead it should be class="pilihbutton". All the other code is fine. Adding the correct HTML for your reference.

Updated code for vanilla javascript

 

 let input = document.querySelectorAll('input[type="radio"]');
  let button = document.querySelector('button[type="submit"]');
 
  input.forEach((element) => {
    element.addEventListener('change', function () {
            button.disabled = false;
            console.log(button);
        });
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pilihansoalan">
  <br>
  <input type="radio" value="<?php echo $soalan['jawapan_a'];?>" name="pilihan" id="boxpilihan-1" />
  <label class="boxpilihan-1" for="boxpilihan-1"><?php echo $soalan['jawapan_a'];?></label>

  <input type="radio" value="<?php echo $soalan['jawapan_b'];?>" name="pilihan" id="boxpilihan-2" />
  <label class="boxpilihan-2" for="boxpilihan-2"><?php echo $soalan['jawapan_b'];?></label>
  </br>
  <br>
  <input type="radio" value="<?php echo $soalan['jawapan_c'];?>" name="pilihan" id="boxpilihan-3" />
  <label class="boxpilihan-3" for="boxpilihan-3"><?php echo $soalan['jawapan_c'];?></label>

  <div>
    <input type="radio" value="<?php echo $soalan['jawapan_d'];?>" name="pilihan" id="boxpilihan-4" />
    <label class="boxpilihan-4" for="boxpilihan-4"><?php echo $soalan['jawapan_d'];?></label>
  </div>
  </br>

  <button type="submit" form="form1" value="Pilih" disabled="disabled" class="pilihbutton">Pilih</button>

Upvotes: 1

Shubham
Shubham

Reputation: 210

it's working fine for me, below is the working example, maybe you missed something.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(function(){
                $("input[type='radio']").change(function(){
                    console.log("enter in on change")
                $("button[type='submit']").prop("disabled", false);
                });
            });
        </script>
    </head>
    <div class="pilihansoalan">
        <br>
        <input type="radio" value="<?php echo $soalan['jawapan_a'];?>" name="pilihan" id="boxpilihan-1"/>
        <label class="boxpilihan-1" for="boxpilihan-1"><?php echo $soalan['jawapan_a'];?></label>

        <input type="radio" value="<?php echo $soalan['jawapan_b'];?>" name="pilihan" id="boxpilihan-2"/>
        <label class="boxpilihan-2" for="boxpilihan-2"><?php echo $soalan['jawapan_b'];?></label>
        </br>
        <br>
        <input type="radio" value="<?php echo $soalan['jawapan_c'];?>" name="pilihan" id="boxpilihan-3"/>
        <label class="boxpilihan-3" for="boxpilihan-3" ><?php echo $soalan['jawapan_c'];?></label>

        <div>
        <input type="radio" value="<?php echo $soalan['jawapan_d'];?>" name="pilihan" id="boxpilihan-4"/>
        <label class="boxpilihan-4" for="boxpilihan-4"><?php echo $soalan['jawapan_d'];?></label>
        </div>
        </br>
        <button type="submit" form="form1" value="Pilih" disabled="disabled" class="pilihbutton" ="pilihan">Pilih</button>
</html>

Upvotes: 1

Related Questions