[英]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.