使用 HTML、CSS 和 JS 單擊一次后，按鈕組驗證和禁用按鈕組

Question

要求：

如果從以下四個按鈕中單擊一個按鈕，則應禁用除下一步按鈕之外的所有按鈕。
警報 Window 在單擊下一步按鈕而不單擊任何其他按鈕時應顯示一條消息，並且不應進入下一頁。 它應該只保留在第一頁上。
只有在四個按鈕中單擊一個按鈕，然后單擊下一步按鈕后，它才會進入下一頁。

以下代碼面臨的問題：

我無法將Next按鈕對齊到容器框的右上角。
警報 window 正在顯示這兩種情況的消息（即使我選擇一個按鈕並單擊下一步按鈕，或者即使我單擊下一步按鈕而不選擇任何按鈕。）
在我單擊警報 window 的OK按鈕后，它將進入下一頁。

樣式.css

 h1
    {
        margin-top: 50px;
        text-align: center;
    }
    .container {
        margin: 50px;
      height: 200px;
      position: relative
    }
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 3px solid green; 
    }

驗證.js

function enable_disable()
{
    $("#formDisable :input").prop("disabled", true);
}
function optionValidation (element)
{
    if ((element.id != "optionA") && (element.id != "optionB") && (element.id != "optionC") && (element.id != "optionD"))
    {
        alert ("Please choose an option.");
    }
}

first_page.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>First</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
    <div class="container">
        <div class="center">
            <form id="formDisable">
                <div class="btn-group-vertical">
                    <button onclick="enable_disable()" type="button"
                        class="btn btn-primary" id="optionA">A</button>
                    <button onclick="enable_disable()" type="button"
                        class="btn btn-primary" id="optionB">B</button>
                    <button onclick="enable_disable()" type="button"
                        class="btn btn-primary" id="optionC">C</button>
                    <button onclick="enable_disable()" type="button"
                        class="btn btn-primary" id="optionD">D.</button>
                </div>
            </form> 
            <form action="second_page.html" method="post" onsubmit="optionValidation(this)">
            <button class="btn btn-primary" type="submit">Next</button>
            </form> 
        </div>
    </div>
</body>
</html>

second_page.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Second</title>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome To Second Page</h1>
</body>
</html>

有人可以幫我解決這些問題嗎？

Answer 1

讓我 go 一步一步解決您的大部分問題：

對於next button的 Alignment 問題，請使用以下 CSS。 我使用了 CSS-grid，而不是 flex。

 h1 { margin-top: 50px; text-align: center; }.container { margin: 50px; height: 200px; position: relative; } /*--- Code updated from Here Onwards ---*/.center { display: grid; grid-template-columns: 1fr 1fr; height: 300px; border: 3px solid green; } form { align-self: center; justify-self: end; }

即使單擊一個按鈕也禁用 4 個按鈕。以及您想要的功能。 播放以下代碼：

 document.addEventListener("DOMContentLoaded", () => { // Functionality 1 let allBtnsDisabled = false; const btnGroup = document.querySelectorAll(".enable-disable"); btnGroup.forEach((btn) => { btn.addEventListener("click", () => { console.log("Clicked Once"); allBtnsDisabled = true; btnGroup.forEach((btnChild) => { btnChild.disabled = true; }); }); }); // Functionality 2 and 3 const formNext = document.querySelector(".form-next"); formNext.addEventListener("submit", (e) => { e.preventDefault(); if (allBtnsDisabled) { formNext.submit(); } return; }); });

 h1 { margin-top: 50px; text-align: center; }.container { margin: 50px; height: 200px; position: relative; }.center { display: grid; grid-template-columns: 1fr 1fr; height: 300px; border: 3px solid green; } form { align-self: center; justify-self: end; }

 <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="center forms-wrapper"> <form id="formDisable"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary enable-disable" id="optionA" > A </button> <button type="button" class="btn btn-primary enable-disable" id="optionB" > B </button> <button type="button" class="btn btn-primary enable-disable" id="optionC" > C </button> <button type="button" class="btn btn-primary enable-disable" id="optionD" > D. </button> </div> </form> <form action="second_page.html" method="get" class="form-next"> <button class="btn btn-primary" type="submit">Next</button> </form> </div> </div> </body> <script src="./script.js"></script> </html>

從這里開始，您可以自己繼續使用任何其他功能。

使用 HTML、CSS 和 JS 單擊一次后，按鈕組驗證和禁用按鈕組

問題描述

1 個解決方案

解決方案1
0 2020-12-17 10:39:13

使用 HTML、CSS 和 JS 單擊一次后，按鈕組驗證和禁用按鈕組

問題描述

1 個解決方案

解決方案1 0 2020-12-17 10:39:13

解決方案1
0 2020-12-17 10:39:13