若并没有输入文本，并且在JavaScript中并没有选中三个复选框中的一个，则尝试禁用按钮

Question

我试图禁用一个按钮，该按钮需要输入要键入的文本，并选中三个复选框中的一个。文本是一个用户名，复选框是一个容易、中等或难的难度。目前，我的功能只有在满足其中一个要求的情况下才能工作。因此，如果文本已经输入，按钮将被启用，复选框也是如此。

startButton.addEventListener('click', startQuiz);
function disableButton() {
if (document.getElementById("username").value === "") {
document.getElementById("start-btn").disabled = true;
}
if (document.getElementsByName("difficulty").checked) {
document.getElementById("start-btn").disabled = true;
}
else {
document.getElementById("start-btn").disabled = false;
}
}

<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn"  disabled>Start</button>

Answer 1

每次值更改时，检查两个输入

let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');
username.addEventListener('input', function() {
validateInput();
})
difficulty.forEach(function(item) {
item.addEventListener('click', function() {
diffChecked = true;
validateInput();
})
})
function validateInput() {
if (username.value && diffChecked) {
startButton.disabled = false;
} else {
startButton.disabled = true
}
}

<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>

Answer 2

您必须使用语义HTMLform而不是div，这将在不编写javascript代码的情况下为您完成任务。

<form id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" required>
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" required>
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" required>
<label for="hard-diff">Hard</label>
</div>
<button type="submit">Enviar</button>
</form>

在form标记中，提交按钮只适用于所有必需的输入，而没有未定义的值。

如果你愿意的话，你可以调用函数startQuiz作为一个动作。action属性指定在提交表单时将表单数据发送到何处。

<form id="difficulty" class="center" action="startQuiz()">