[英]How to enable a button when radio button from all the sets are selected?
我正在做一個測試並遇到了一個問題。
如何制作僅在選中所有字段時啟用按鈕的 .js 腳本。
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>
我在網上找到了這個 .js,但我不能很好地適應它,因為我有多頁具有不同輸入名稱的測試題。
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.getElementById('world').addEventListener('change', onChange, false);
您的代碼庫存在一些問題。
document.getElementById('world').addEventListener('change', onChange, false);
問題沒有具有該指定 ID 的節點。
提交按鈕有多個 ID。 這是不可能的。
document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')
您的輸入類型是radio
因此上述輸入類型不起作用。 name 屬性也是錯誤的。
我已經添加了這些修復。
function numberOfCheckboxesSelected() { return document.querySelectorAll('input[type=radio]:checked').length; } function onChange() { console.log(numberOfCheckboxesSelected()); document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3; } document.querySelectorAll('input[type=radio]').forEach(node => { node.addEventListener('change', onChange, false); });
<table> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q1" value="1" id="q1"></td> <td><input type="radio" name="q1" value="2" id="q1"></td> <td><input type="radio" name="q1" value="3" id="q1"></td> <td><input type="radio" name="q1" value="4" id="q1"></td> <td><input type="radio" name="q1" value="5" id="q1"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q2" value="1" id="q2"></td> <td><input type="radio" name="q2" value="2" id="q2"></td> <td><input type="radio" name="q2" value="3" id="q2"></td> <td><input type="radio" name="q2" value="4" id="q2"></td> <td><input type="radio" name="q2" value="5" id="q2"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q3" value="1" id="q3"></td> <td><input type="radio" name="q3" value="2" id="q3"></td> <td><input type="radio" name="q3" value="3" id="q3"></td> <td><input type="radio" name="q3" value="4" id="q3"></td> <td><input type="radio" name="q3" value="5" id="q3"></td> </td> </tr> </table> <div class="register-button"> <input type="submit" name="submit1" class="inputButton" value="Következő" disabled id="enable-on-two" /> </div>
上述解決方案需要稍加修正,因為它啟用了兩個輸入選擇上的提交按鈕,而不是所有三個。
替換以下內容:
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
這樣:
let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < totalInputs;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.