禁用按钮，直到用户单击复选框 | JavaScript答案

【问题标题】：Disable a button until the user clicks on a check box | JavaScript禁用按钮，直到用户单击复选框 | JavaScript
【发布时间】：2021-11-02 09:33:01
【问题描述】：

我希望在用户通过单击复选框同意游戏规则之前禁用 User-Id 下方的按钮。我已经有一个朋友发送的代码。但我的问题是它在实际页面上不起作用。我认为不是因为 JS 脚本在 HTML 脚本中没有正确连接。如何正确连接脚本？

这是 JavaScript 的代码：

function input(event) {
    const checked = document.getElementById("startgame").checked;
    const button = document.getElementById("startbutton");

    if (checked) {
        button.disabled = false;
        return;
        alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
    } else

        button.disabled = true;
    alert("Es tut us leid. Jedoch müssen Sie zuerst unsere Regeln akzeptieren.")
}

这是我的 HTML 脚本：

            <div class="quiz-menu" data-aos="fade-up" data-aos-duration="3000">
            <div class="rules">
                <h1 class="rules-title"><i class="fas fa-scroll"></i>&nbsp;RULES!</h1>
                <p class="rules-text">
                    <center>
                        <b>
                            Damit das Quiz Ihnen nicht zu einfach gemacht wird; gibt es ein paar Regeln. Lesen Sie diese bitte durch:
                        </b>
                    </center>
                </p>
                <p class="rules-list">
                    1. Hilfsmittel (wie z.B. Websiten) werden blockiert;
                    <br>
                    <br />
                    2. Sie haben <i>alle Zeit der Welt</i>. Überstressen Sie sich also nicht und denken sie mit Ruhe nach.
                    <br><br />
                    3. Seien Sie nicht enttäuscht, wenn sie fehler haben. Sie können diesen Test jeder Zeit wiederholen -
                    und sich verbessern.
                </p>
            </div>
            <div class="user-id">
                <div class="user-background" data-aos="flip-down" data-aos-duration="3000">
                    <h2 class="user-title">USER-ID</h2>
                    <p class="user-text">
                        Damit Sie unseren Highscore auch richtig nutzen können,
                        bitten wir sie, dass sie sich einen Usernamen ausdenken.
                    </p>
                    <form action="/action_page.php" class="quizform">
                        <label for="nname" class="formtext"><b>Nickname:</b></label><br>
                        <input type="text" id="fname" name="nname" value="Dein Username">
                        <br><br />
                        <input type="checkbox" id="startgame" name="startgame" value="startgame">
                        <label for="startgame"> Um das Spiel zu starten, muss du die Checkbox ankreuzen</label><br>
                        <br>
                    </form>
                </div>
            </div>
            <div>
                <a href="kategorieeins.html" class="quiz-button" id="startbutton"><span><i class="fas fa-play"></i>&nbsp;&nbsp;quiz starten</span></a>
            </div>
        </div>

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。
应更新问题以包含所需行为、特定问题或错误以及重现问题所需的最短代码。（请考虑一下德语部分是否真的有必要？）
@caramba 我修好了。我希望它现在是正确的。如果不是：我需要解决什么问题？

标签： javascript html web

【解决方案1】：

你有 function input(event) 然后在复选框更改事件上调用它，就像使用下面的代码 sn-p

 <input type="checkbox" id="startgame" name="startgame" value="startgame" onchange="input(this)">

你必须在标签内添加按钮，这样你就可以在复选框选择时启用它，所以我用这个来改变你的标签

<a href="kategorieeins.html" class="quiz-button"><button id="startbutton" disabled><i class="fas fa-play"></i>&nbsp;&nbsp;quiz starten</button></a>

这是一个工作演示，希望易于理解。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    function input(event) {
        const checked = document.getElementById("startgame").checked;
        const button = document.getElementById("startbutton");
        if (checked) {
            button.disabled = false; 
            return;
              alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
        } else
            button.disabled = true;
        alert("Es tut us leid. Jedoch müssen Sie zuerst unsere Regeln akzeptieren.")
    }
    function showAlert()
    {
     alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
    }
    </script>
    </head>
    <body>

    <div class="quiz-menu" data-aos="fade-up" data-aos-duration="3000">
                <div class="rules">
                    <h1 class="rules-title"><i class="fas fa-scroll"></i>&nbsp;RULES!</h1>
                    <p class="rules-text">
                        <center>
                            <b>
                                Damit das Quiz Ihnen nicht zu einfach gemacht wird; gibt es ein paar Regeln. Lesen Sie diese bitte durch:
                            </b>
                        </center>
                    </p>
                    <p class="rules-list">
                        1. Hilfsmittel (wie z.B. Websiten) werden blockiert;
                        <br>
                        <br />
                        2. Sie haben <i>alle Zeit der Welt</i>. Überstressen Sie sich also nicht und denken sie mit Ruhe nach.
                        <br><br />
                        3. Seien Sie nicht enttäuscht, wenn sie fehler haben. Sie können diesen Test jeder Zeit wiederholen -
                        und sich verbessern.
                    </p>
                </div>
                <div class="user-id">
                    <div class="user-background" data-aos="flip-down" data-aos-duration="3000">
                        <h2 class="user-title">USER-ID</h2>
                        <p class="user-text">
                            Damit Sie unseren Highscore auch richtig nutzen können,
                            bitten wir sie, dass sie sich einen Usernamen ausdenken.
                        </p>
                        <form action="/action_page.php" class="quizform">
                            <label for="nname" class="formtext"><b>Nickname:</b></label><br>
                            <input type="text" id="fname" name="nname" value="Dein Username">
                            <br><br />
                            <input type="checkbox" id="startgame" name="startgame" value="startgame" onchange="input(this)">
                            <label for="startgame"> Um das Spiel zu starten, muss du die Checkbox ankreuzen</label><br>
                            <br>
                        </form>
                    </div>
                </div>
                <div>
                    <a href="kategorieeins.html" class="quiz-button"><button onclick="showAlert()" id="startbutton" disabled><i class="fas fa-play"></i>&nbsp;&nbsp;quiz starten</button></a>
                </div>
            </div>

    </body>
    </html>

【讨论】：

到目前为止还不错。你能实现点击按钮后弹出弹窗吗？
表示您希望在单击按钮时显示警报？
@DailyCodingCrown 现在检查我更新了代码。
到目前为止一切正常。你知道我该如何解决链接仍然处于活动状态并且必须单击复选框的问题吗？
永远不明白你到底想要什么？