未单击单选按钮时禁用按钮

Question

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.我在网上找到了这个 javascript 但它不起作用。 It's only working for one radio button only它仅适用于一个单选按钮

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

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

Answer 1

There is a wrong class attribute defined for the submit button in the HTML code.在 HTML 代码中为提交按钮定义了错误的 class 属性。 class="pilihbutton" ="pilihan" instead it should be class="pilihbutton" . class="pilihbutton" ="pilihan"而应该是class="pilihbutton" 。 All the other code is fine.所有其他代码都很好。 Adding the correct HTML for your reference.添加正确的 HTML 供您参考。

Updated code for vanilla javascript更新了原版 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>

Answer 2

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>

未单击单选按钮时禁用按钮

问题描述

2 个解决方案

解决方案1
1 2021-05-18 06:01:01

解决方案2
1 2021-05-18 06:01:24

未单击单选按钮时禁用按钮

问题描述

2 个解决方案

解决方案1 1 2021-05-18 06:01:01

解决方案2 1 2021-05-18 06:01:24

解决方案1
1 2021-05-18 06:01:01

解决方案2
1 2021-05-18 06:01:24