我的网站上有3个复选框，还有一个button来提交问题的答案。我如何在默认情况下禁用该按钮，并且只有在人员检查了3checkboxes后，我们才会禁用该按钮？我尝试实现一个IF语句，但即使一个人在每个复选框上选中了至少一个答案，它仍然是disabled。这是我代码的一部分：
为什么我的IF语句不起作用？提前感谢！
const colorblind = document.getElementById("colorblindoptions");
const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");
const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");
const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");
const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");
if ((soundyes.checked == true || soundno.checked == true) && (biglettersyes.checked == true || biglettersno.checked == true) && (explanationyes.checked == true || explanationno.checked == true)) {
submit.disabled = false;
}
else {
submit.disabled = true;
}<table id = "settingstable">
<tr>
<th>
Settings
</th>
<th>
Yes
</th>
<th>
No
</th>
</tr>
<tr>
<td>
<select name = "colorblind" id = "colorblindoptions">
<option value = "nocolorblind"> I'm not colorblind </option>
<option value = "achromatopsia"> Achromatopsia </option>
<option value = "monoachromatopsia"> Monoachromatopsia </option>
<optgroup label = "Dichromacy">
<option value = "deuteranopia"> Deuteranopia </option>
<option value = "tritanopia"> Tritanopia </option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<p class = "text">
Would you like voice-sound?
</p>
</td>
<td>
<input type = "radio" id = "soundyes" name = "sound" value = "soundyes">
</td>
<td>
<input type = "radio" id = "soundno" name = "sound" value = "soundno">
</td>
</tr>
<tr>
<td>
<p class = "text">
Would you like big letters?
</p>
</td>
<td>
<input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes">
</td>
<td>
<input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno">
</td>
</tr>
<tr>
<td>
<p class = "text">
Would you like explanations on pictures?
</p>
</td>
<td>
<input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes">
</td>
<td>
<input type = "radio" id = "explanationno" name = "explanation" value = "explanationno">
</td>
</tr>
</table>
<div id = "buttondiv">
<button id = "submit"> Submit </button>
</div>您有一段代码，上面写着"；如果检查了三个输入，则启用提交按钮"；。我们可以通过将此代码粘贴到一个函数(称为checkSubmitEnabled(中，并在每次单击时调用该函数来获得您想要的结果。
const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");
const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");
const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");
const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");
let checkSubmitEnabled = () => {
let enabled = true
&& (soundyes.checked == true || soundno.checked == true)
&& (biglettersyes.checked == true || biglettersno.checked == true)
&& (explanationyes.checked == true || explanationno.checked == true);
submit.disabled = !enabled;
};
soundyes.addEventListener('input', checkSubmitEnabled);
biglettersyes.addEventListener('input', checkSubmitEnabled);
explanationyes.addEventListener('input', checkSubmitEnabled);
soundno.addEventListener('input', checkSubmitEnabled);
biglettersno.addEventListener('input', checkSubmitEnabled);
explanationno.addEventListener('input', checkSubmitEnabled);
// Run the function to get the initial state
checkSubmitEnabled();<table id = "settingstable">
<tr>
<th>Settings</th>
<th>Yes</th>
<th>No</th>
</tr>
<tr>
<td>
<select name = "colorblind" id = "colorblindoptions">
<option value = "nocolorblind"> I'm not colorblind </option>
<option value = "achromatopsia"> Achromatopsia </option>
<option value = "monoachromatopsia"> Monoachromatopsia </option>
<optgroup label = "Dichromacy">
<option value = "deuteranopia"> Deuteranopia </option>
<option value = "tritanopia"> Tritanopia </option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<p class = "text">Would you like voice-sound?</p>
</td>
<td><input type = "radio" id = "soundyes" name = "sound" value = "soundyes"></td>
<td><input type = "radio" id = "soundno" name = "sound" value = "soundno"></td>
</tr>
<tr>
<td>
<p class = "text">Would you like big letters?</p>
</td>
<td><input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes"></td>
<td><input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno"></td>
</tr>
<tr>
<td>
<p class = "text">Would you like explanations on pictures?</p>
</td>
<td><input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes"></td>
<td><input type = "radio" id = "explanationno" name = "explanation" value = "explanationno"></td>
</tr>
</table>
<div id = "buttondiv">
<button id = "submit"> Submit </button>
</div>将其包裹在div周围，并在默认情况下将按钮设置为禁用，然后使用事件侦听器触发动作
const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");
const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");
const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");
const radio=document.getElementById("radio")
const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");
radio.addEventListener("change",()=>{
if ((soundyes.checked == true || soundno.checked == true) && (biglettersyes.checked == true || biglettersno.checked == true) && (explanationyes.checked == true || explanationno.checked == true)) {
submit.disabled = false;
}
else {
submit.disabled = true}
})<div id="radio">
<input type = "radio" id = "soundyes" name = "sound" value = "soundyes">
</td>
<td>
<input type = "radio" id = "soundno" name = "sound" value = "soundno">
</td>
</tr>
<tr>
<td>
<p class = "text">
Would you like big letters?
</p>
</td>
<td>
<input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes">
</td>
<td>
<input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno">
</td>
</tr>
<tr>
<td>
<p class = "text">
Would you like explanations on pictures?
</p>
</td>
<td>
<input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes">
</td>
<td>
<input type = "radio" id = "explanationno" name = "explanation" value = "explanationno">
</td>
</tr>
</table>
<div id = "buttondiv">
<button id = "submit" disabled> Submit </button>
</div>
</div>没有答案。但您应该使用输入名称来检查您的复选框是否被选中。应该可以
var checkedSound = [...document.getElementsByName("sound")].some(c=>c.checked);
var checkedBigletters = [...document.getElementsByName("bigletters")].some(c=>c.checked);
var checkedExplanation = [...document.getElementsByName("explanation")].some(c=>c.checked);
// if all true then enable button