使用事件监听器禁用和启用按钮

Question

我有一个包含六个字段的国际象棋表格。 两个是指向 select 名称（whiteplayername 和 blackplayername）的下拉菜单，另外四个可用于添加自定义名称（firstnamewhite、lastnamewhite、firstnameblack、lastnameblack）。 目前，如果从下拉菜单中选择了一个名称，我希望我的 javascript 禁用自定义字段（这是有效的）。 如果既没有选择 whiteplayername 也没有选择 firstnameblack 的 firstnamewhite 和 blackplayername，我还希望禁用提交按钮。 目前，如果从 blackplayername 和 whiteplayname 菜单中都选择了一个名称，则提交按钮将启用，但如果在任一菜单中选择了一个空字段，则提交按钮不会再次禁用。

编辑

完整的 html 在下面，尽管我从表格中删除了一个由文本和行组成的部分以减少使用的空间。

    <!DOCTYPE html>
    <html lang="en"
      xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>chessopenings3</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        body {
            style: "background-color: #FF0000;
        }

        .topnav {
            position: relative;
            overflow: hidden;
            background-color: #333;
            border: 2px;
            width: max-content;
        }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            border: 2px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
            border: 2px;
        }

        .formformat {
            color: white;
            padding: 50px;
            font-size: 24px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .instructions-text {
            position: absolute;
            color: white;
            align: center;
            left: 750px;
            top: 150px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }

        .warning {
            position: absolute;
            color: white;
            text-align: left;
            left: 150px;
            top: 50px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }

        select {
            width: 120px;
        }

        select:focus {
            min-width: 120px;
            width: auto;
        }

        @media screen and (max-width: 500px) {
            .navbar a {
                float: none;
                display: block;
            }
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let isformvalid = false;
            document.getElementById("submit-button").disabled = !isformvalid;
    document.getElementById("whiteplayername").addEventListener("change", function () {
     
                let blackplayername = 
    document.getElementById("blackplayername");
                let firstnameblack = 
    document.getElementById("firstnameblack");
                let firstnamewhite = 
    document.getElementById("firstnamewhite");
                let lastnamewhite = 
    document.getElementById("lastnamewhite");
                let lastnameblack = 
    document.getElementById("lastnameblack");
                
    disablewhenmandatorynamemissingwhitename(this.value, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite);
                isformvalid = checkeitherfirstorfullnamepopulated (this.value, firstnamewhite, blackplayername, firstnameblack, isformvalid);
                document.getElementById("submit-button").disabled = !isformvalid;
            });
        });

        function disablewhenmandatorynamemissingwhitename(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
            if (whiteplayername !== "") {
                firstnamewhite.disabled = true;
                lastnamewhite.disabled = true;
            } else {
                firstnamewhite.disabled = false;
                lastnamewhite.disabled = false;
            }
        }

        function disablewhenmandatorynamemissingblackname(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
            if (blackplayername !== "") {
                firstnameblack.disabled = true;
                lastnameblack.disabled = true;
            } else {
                firstnameblack.disabled = false;
                lastnameblack.disabled = false;
            }
        };

        function checkeitherfirstorfullnamepopulated(whiteplayername, firstnamewhite, blackplayername, firstnameblack, isformvalid) {
            if ((whiteplayername === "" || whiteplayername === null) && (firstnamewhite.trim() === "")) {
                return false;
            }
            else if ((blackplayername === "" || blackplayername === null) && (firstnameblack.trim() === "")) {
                return false;
            }
            return true;
        };
    </script>
    <body style="background-color:rgb(68, 57, 57);">
     <div class="warning">
    <p id="warningtext"></p><br>
     </div>
    <div class="topnav">
    <a th:href="@{main.html}"><i class="material-icons"
                                 style="border:2px;font-size:60px;color:rgb(0, 0, 0);">arrow_back</i></a>
    </div>
    <div class="formformat">
    <form th:object="${game}" th:action="@{/addgame}" th:method="post">
        <label for="whiteplayername">Select white player:</label>
        <select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
            <option th:value="null" th:selected="${game.name == null}"></option>
            <th:block th:each="name : ${names}">
                <option th:value="${name.name}"
                        th:text="${name.name}"></option>
            </th:block>
        </select>
        <label for="blackplayername">Select black player:</label>
        <select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
            <option th:value="null" th:selected="${game.name == null}"></option>
            <th:block th:each="name : ${names}">
                <option th:value="${name.name}"
                        th:text="${name.name}"></option>
            </th:block>
        </select><br><br>
        <label for="firstnamewhite">First name white:</label>
        <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
        <label for="firstnameblack">First name black:</label>
        <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
        <label for="lastnamewhite">Last name white:</label>
        <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
        <label for="lastnameblack">Last name black:</label>
        <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
        <label for="date">Date:</label><br>
        <input type="date" id="date" th:field="*{date}">
        <table>
            <tr>
                <th>Move</th>
                <th>White</th>
                <th>Black</th>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text" id="white1" th:field="*{moves}"></td>
                <td><input type="text" id="black1" th:field="*{moves}"></td>
            </tr>
        </table>
        <input type="submit" value="Submit" id="submit-button">
    </form>

</div>
<br><br>
</body>
</html>
 

Answer 1

你也可以提供html代码吗？ 我还建议正确命名你的变量和函数，因为顺便说一下，它们很难辨认。 尝试至少以大写形式键入每个单词的第一个字母。

代替：

let firstnameblack

做：

let firstNameBlack

我还建议根据指定此变量的内容放置 2 或 3 个字母，例如，如果它是一个按钮，请执行以下操作：

let btnFirstNameBlack

无论如何，如果您能提供 html 代码，也许我可以帮助您解决按钮问题。

Answer 2

这是一个应该满足您所有要求的解决方案：

 <script type="module"> const form = document.getElementById("form"); const submitButton = document.getElementById("submitbutton"); const whitePlayerName = document.getElementById("whiteplayername"); const blackPlayerName = document.getElementById("blackplayername"); const firstNameBlack = document.getElementById("firstnameblack"); const firstNameWhite = document.getElementById("firstnamewhite"); const lastNameWhite = document.getElementById("lastnamewhite"); const lastNameBlack = document.getElementById("lastnameblack"); form.addEventListener('change', () => { const whiteNameSelected = whitePlayerName.value; // Disable white name inputs if white name is selected in the dropdown firstNameWhite.disabled = whiteNameSelected; lastNameWhite.disabled = whiteNameSelected; // Determine if the white name is either selected or typed in the inputs const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value); const blackNameSelected = blackPlayerName.value; // Disable black name inputs if black name is selected in the dropdown firstNameBlack.disabled = blackNameSelected; lastNameBlack.disabled = blackNameSelected; // Determine if the black name is either selected or typed in the inputs const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value); const submitAvailable = validWhiteName && validBlackName; submitButton.disabled =;submitAvailable; }): </script> <form th:object="${game}" th:action="@{/addgame}" th:method="post" id="form"> <label for="whiteplayername">Select white player:</label> <select name="whiteplayername" id="whiteplayername" th:object="${names}" th.field="${game:whitePlayerName}"> <option th:value="null" th.selected="${game:name == null}"></option> <option value="name1">Name 1</option> <option value="name2">Name 2</option> </select> <label for="blackplayername">Select black player:</label> <select name="blackplayername" id="blackplayername" th:object="${names}" th.field="${game:blackPlayerName}"> <option th:value="null" th.selected="${game:name == null}"></option> <option value="name1">Name 1</option> <option value="name2">Name 2</option> </select><br><br> <label for="firstnamewhite">First name white:</label> <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/> <label for="firstnameblack">First name black:</label> <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br> <label for="lastnamewhite">Last name white:</label> <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/> <label for="lastnameblack">Last name black:</label> <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br> <label for="date">Date:</label><br> <input type="date" id="date" th:field="*{date}"> <button id="submitbutton" disabled>Submit</button> </form>

它的工作原理是将所有逻辑组合到一个用于整个表单更改的处理程序中。 然后，如果在下拉列表中选择了一个名称，它会禁用自定义名称字段，如果没有，它会使它们保持启用状态。 代码检查以确保白色和黑色名称均有效，并根据设置启用/禁用提交按钮 state。

你没有发布你的整个 HTML 所以我手动添加了按钮并且你的选择是动态填充的所以我不得不在其中硬编码一些选项。 对于 Stack Overflow 问题，请始终发布其他人可重现的示例，以帮助他们帮助您。