Question

GIF1（在此GIF中，我的复选框默认处于禁用状态，并自动检查是否单击相位按钮） GIF2（在此GIF中，我的第一个复选框已启用，如果单击第一个复选框，则提交按钮有效）我的最终目标是，如果他们像第一个GIF一样自动检查，实际上让提交按钮有效。

    <!DOCTYPE html>
<html lang="en">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <title>Bootstrap</title>


</head>
<body>

    <button onclick="enableShadowButton()">Click me to submit Phase1</button>
    <input type="checkbox" id="c1"/ disabled> Phase1
    <br>

    <button onclick="phase2Function()">Click me to submit Phase2</button>
    <input type="checkbox" id="c2"/ disabled> Phase2
    <br>

    <button onclick="phase3Function()"> Click me to submit Phase3</button>
    <input type="checkbox" id="c3"/ disabled> Phase3
    <br>

    <button onclick="phase4Function()"> Click me to submit Phase4</button>
    <input type="checkbox" id="c4"/ disabled> Phase4
    <br>

    <button onclick="phase5Function()">  Click me to submit Phase5</button>
    <input type="checkbox" id="c5"/ disabled> Phase5
    <br>

    <button onclick="shadowFunction()" id="shadowbutton" disabled>Shadow Button</button>

<!--This script defines the functionalilty of the buttons which is 1.Autochecking and 2.Alerting-->
<script>


        function enableShadowButton() {
        document.getElementById("c1").checked=true;
        alert("You have completed Phase 1!");
        }
       function phase2Function() {
        document.getElementById("c2").checked=true;
        alert("You have completed Phase 2!");
        }
       function phase3Function() {
        document.getElementById("c3").checked=true;
        alert("You have completed Phase 3!");
        }
       function phase4Function() {
        document.getElementById("c4").checked=true;
        alert("You have completed Phase 4!");
        }
       function phase5Function() {
        document.getElementById("c5").checked=true;
            alert("You have completed Phase 5!");
            shadowFunction();
        }

//This function uses .checked(which makes sure the box is check marked) for 1-5 before moving on. Previously we used .checked=true which actually marks the boxes rather than verifying it

    function shadowFunction(){

           if((document.getElementById("c1").checked) &&
              (document.getElementById("c2").checked) &&
              (document.getElementById("c3").checked) &&
              (document.getElementById("c4").checked) &&
              (document.getElementById("c5").checked))
              { 
                   document.getElementById("shadowbutton").disabled=false;
                }

    }
</script>
<!--This script defines the functionalilty of the buttons which is 1.Autochecking and 2.Alerting-->




<!--best practice is to put script at the bottom of body so the page loads first, if in between head page wont load along with script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

<!--<li><a href="#">Reviews <span class="badge">1,118</span></a></li>-->





[1]: https://i.stack.imgur.com/uRmFg.gif
[2]: https://i.stack.imgur.com/Xrh35.gif

Answer 1

您需要在phase1Function（）中运行shadowFunction（）的功能。如果禁用该按钮，则shadowFunction（）中的if语句永远不会运行。

Answer 2

我认为你应该在第五个按钮的末尾调用shadowFunction（），如下所示：本功能

function phase5Function() {
            document.getElementById("c5").checked=true;
            alert("You have completed Phase 5!");
            shadowFunction();}

通过禁用复选框启用提交按钮

2 个答案: