簡體   English   中英

未單擊單選按鈕時禁用按鈕

[英]disable button when no radio button is clicked

所以我有一堆單選按鈕,我想這樣做,如果沒有點擊單選按鈕,提交按鈕就會被禁用。 我在網上找到了這個 javascript 但它不起作用。 它僅適用於一個單選按鈕

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);
                });
                });

在 HTML 代碼中為提交按鈕定義了錯誤的 class 屬性。 class="pilihbutton" ="pilihan"而應該是class="pilihbutton" 所有其他代碼都很好。 添加正確的 HTML 供您參考。

更新了原版 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>

它對我來說很好,下面是工作示例,也許你錯過了一些東西。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM