通過禁用的復選框啟用提交按鈕

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（），如下所示：funct

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

通過禁用的復選框啟用提交按鈕

問題描述

2 個解決方案

解決方案1
0 2017-10-30 04:30:37

解決方案2
0 2017-10-30 04:41:16

通過禁用的復選框啟用提交按鈕

問題描述

2 個解決方案

解決方案1 0 2017-10-30 04:30:37

解決方案2 0 2017-10-30 04:41:16

解決方案1
0 2017-10-30 04:30:37

解決方案2
0 2017-10-30 04:41:16