时间戳

首页 > 解决方案 > 一个人选中 3 个复选框后，如何使按钮解锁？

javascript - 一个人选中 3 个复选框后，如何使按钮解锁？

问题描述

我的网站上有 3 个复选框，并有一个button用于提交问题的答案。我如何使按钮默认禁用，并且只有在该人检查了 3checkboxes之后我们才会禁用它？我尝试实现一个 IF 语句，但即使一个人在每个复选框上检查了至少 1 个答案，它仍然是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>

标签： javascripthtml

解决方案

不是答案。但是您应该使用输入名称检查您的复选框是否被选中。那应该工作

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

推荐阅读