如何在选择单选按钮之前禁用提交按钮（Javascript、HTML 和 Flask）

Question

我已经看到与此类似的其他问题，但我不知道我的应用程序是否无法正常工作，因为我正在使用 Flask/SQLAlchemy 应用程序（卡车调度应用程序），或者我是否还有其他问题。 我想禁用提交/更新按钮，直到用户选择要提取的材料之一。

更新.html：

<h3>Update Appointment:</h3><br>

<form action="/update/{{appt.id}}" method="POST">
    <label>Carrier:</label>
    <input type="text" name="carrier" id="carrier" 
        value="{{ appt.carrier }}"><br>

    <h4>Current material = {{ appt.material }}</h4>
    <label>Select a new material:</label><br>
    <input type="radio" name="material_update" id="HCl" value="HCl">
    <label for="HCl">HCl</label><br>

    <input type="radio" name="material_update" id="Caustic" value="Caustic">
    <label for="Caustic">Caustic</label><br>

    <input type="radio" name="material_update" id="Bleach" value="Bleach">
    <label for="Bleach">Bleach</label><br>

    <button type="submit" id="update_button" disabled>Update Appointment</button>
</form>

<script>
document.getElementsByName('material_update')
    .addEventListener('click', enable);

function enable() {
    document.querySelector('#update_button').disabled = False;
}
</script>

Answer 1

.getElementsByName()返回一个节点列表并且不支持.addEventListener() ，但是该节点列表中的元素可以。

此外，Boolean false 在 JavaScript 中为 false，而不是 False。

无需将事件侦听器附加到每个单选按钮，您可以将侦听器附加到它们的共同祖先，在本例中为form 。 然后，当侦听器触发时，您可以检查它是否是启动事件的单选按钮之一，如果是，则采取行动。

 // Get your DOM references just once, not every time // the function is called. let update = document.querySelector('#update_button'); // Use "event delegation" and set up the event at // a common ancestor element of the elements you // wish to handle. document.querySelector('form').addEventListener('click', enable); function enable(event) { // Check to see if it was a radio button that // initiated the event if(event.target.name === "material_update"){ // False in JavaScript is false, not False update.disabled = false; } }

 <h3>Update Appointment:</h3><br> <form action="/update/{{appt.id}}" method="POST"> <label>Carrier:</label> <input type="text" name="carrier" id="carrier" value="{{ appt.carrier }}"><br> <h4>Current material = {{ appt.material }}</h4> <label>Select a new material:</label><br> <input type="radio" name="material_update" id="HCl" value="HCl"> <label for="HCl">HCl</label><br> <input type="radio" name="material_update" id="Caustic" value="Caustic"> <label for="Caustic">Caustic</label><br> <input type="radio" name="material_update" id="Bleach" value="Bleach"> <label for="Bleach">Bleach</label><br> <button type="submit" id="update_button" disabled>Update Appointment</button> </form>