个人中心
gpt4 book ai didi

javascript - 如何在不完成 Bootstrap 中的一个步骤的情况下禁止进入下一步？

转载 作者：行者123 更新时间：2023-11-28 23:32:31 27 4
gpt4 key购买 nike

我创建了一个 Bootstrap 小部件进度显示形式。它有 6 个步骤。我的问题是

  1. 当用户执行第一步时，如何禁用所有其他步骤？
  2. 当用户完成第一步时，然后授予移动到第二步的权限并禁用所有其他步骤，直到用户完成当前步骤。
  3. 如何阻止进入上一步？

这是我的代码

    <?php

    include_once 'dbconnect.php';

    ?>

    <?php
    if (isset($_POST['btn-signup'])) {

        $Mnumber = $_POST['Mnumber'];

        $emailErr = "";

        $email = $_POST['email'];
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format";
        }

        $fname    = $_POST['fname'];
        $address  = $_POST['address'];
        $sitename = $_POST['sitename'];
        $payment  = $_POST['payment'];
        $title    = $_POST['title'];
        $descr    = $_POST['descr'];
        $step1    = $_POST['step1'];

        $new_fname = $_POST['sitename'];
        $xxx = mysql_query("SELECT fname FROM txfgf WHERE sitename = '$new_fname'") or die(mysql_error());
        $yyy = mysql_fetch_row($xxx);

        if (mysql_num_rows($xxx) > 0) {
            echo "<script type='text/javascript'>alert('From this Name already there is a website,Tryout with different Web site Name !')</script>";
        } else {
            $query = mysql_query("INSERT INTO txfgf(Mnumber,email,fname,address,sitename,payment,title,descr) VALUES('$Mnumber','$email','$fname','$address','$sitename','$payment','$title','$descr')");

            echo "<script>
                alert(' You have registered Successfully !');

                </script>";
        }
    }


    ?>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Monthly Paid Package</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <!-- Lib CSS -->
        <link href="//fonts.googleapis.com/css?family=Rancho|Open+Sans:400,300,300italic,400italic,600,600italic,700,800italic,700italic,800" rel="stylesheet">
        <link href="minify/rgen_min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">

        <!-- Favicons -->
        <link rel="icon" href="images/favicons/glogo.png">
        <link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></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.6/js/bootstrap.min.js"></script>

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>


        <script type="text/javascript">
            $(document).ready(function(){
                $("#sitename").keyup(function() {
                    var sitename = $('#sitename').val();
                    if(sitename=="")
                    {
                        $("#disp").html("");
                    }
                    else
                    {
                        $.ajax({
                            type: "POST",
                            url: "check_name.php",
                            data: "sitename="+ sitename ,
                            success: function(html){
                                $("#disp").html(html);
                            }
                        });
                        return false;
                    }
                });
            });
        </script>

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
        <!--[if IE 9 ]><script src="js/ie-matchmedia.js"></script><![endif]-->

        <script type="text/javascript">
            function resetActive(event, percent, step) {
                $(".progress-bar").css("width", percent + "%").attr("aria-valuenow", percent);
                $(".progress-completed").text(percent + "%");

                $("div").each(function () {
                    if ($(this).hasClass("activestep")) {
                        $(this).removeClass("activestep");
                    }
                });

                if (event.target.className == "col-md-2") {
                    $(event.target).addClass("activestep");
                }
                else {
                    $(event.target.parentNode).addClass("activestep");
                }

                hideSteps();
                showCurrentStepInfo(step);
            }

            function hideSteps() {
                $("div").each(function () {
                    if ($(this).hasClass("activeStepInfo")) {
                        $(this).removeClass("activeStepInfo");
                        $(this).addClass("hiddenStepInfo");
                    }
                });
            }

            function showCurrentStepInfo(step) {
                var id = "#" + step;
                $(id).addClass("activeStepInfo");
            }
        </script>
    </head>
    <style>
        .hiddenStepInfo {
            display: none;
        }

        .activeStepInfo {
            display: block !important;
        }

        .underline {
            text-decoration: underline;
        }

        .step {
            margin-top: 27px;
        }

        .progress {
            position: relative;
            height: 25px;
        }

        .progress > .progress-type {
            position: absolute;
            left: 0px;
            font-weight: 800;
            padding: 3px 30px 2px 10px;
            color: rgb(255, 255, 255);
            background-color: rgba(25, 25, 25, 0.3);
        }

        .progress > .progress-completed {
            position: absolute;
            right: 0px;
            font-weight: 800;
            padding: 3px 10px 2px;
        }

        .step {
            text-align: center;
        }

        .step .col-md-2 {
            background-color: #fff;
            border: 1px solid #C0C0C0;
            border-right: none;
        }

        .step .col-md-2:last-child {
            border: 1px solid #C0C0C0;
        }

        .step .col-md-2:first-child {
            border-radius: 5px 0 0 5px;
        }

        .step .col-md-2:last-child {
            border-radius: 0 5px 5px 0;
        }

        .step .col-md-2:hover {
            color: #F58723;
            cursor: pointer;
        }

        .step .activestep {
            color: #F58723;
            height: 100px;
            margin-top: -7px;
            padding-top: 7px;
            border-left: 6px solid #5CB85C !important;
            border-right: 6px solid #5CB85C !important;
            border-top: 3px solid #5CB85C !important;
            border-bottom: 3px solid #5CB85C !important;
            vertical-align: central;
        }

        .step .fa {
            padding-top: 15px;
            font-size: 40px;
        }
    </style>
    <body>
    <div class="container" style="margin-top: 100px; margin-bottom: 100px;">
        <div class="row">
            <div class="progress" id="progress1">
                <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
                </div>
                <span class="progress-type">Overall Progress</span>
                <span class="progress-completed">20%</span>
            </div>
        </div>
        <div class="row">
            <div class="row step">
                <div id="div1" class="col-md-2" onclick="javascript: resetActive(event, 0, 'step-1');">
                    <span class="fa fa-file-text-o"></span>
                    <p>Registration Form</p>
                </div>
                <div class="col-md-2" onclick="javascript: resetActive(event, 20, 'step-2');">
                    <span class="fa fa-mobile-phone"></span>
                    <p>Mobile Number</p>
                </div>
                <div class="col-md-2" onclick="javascript: resetActive(event, 40, 'step-3');">
                    <span class="fa fa-search-plus"></span>
                    <p>Security Question</p>
                </div>
                <div class="col-md-2" onclick="javascript: resetActive(event, 60, 'step-4');">
                    <span class="fa fa-viacoin"></span>
                    <p>Verification Code</p>
                </div>
                <div class="col-md-2" onclick="javascript: resetActive(event, 80, 'step-5');">
                    <span class="fa fa-usd"></span>
                    <p>Payment</p>
                </div>
                <div id="last" class="col-md-2" onclick="javascript: resetActive(event, 100, 'step-6');">
                    <span class="fa fa-thumbs-up"></span>
                    <p>Finish</p>
                </div>
     !</div>
</div>
<div class="row setup-content step activeStepInfo" id="step-1">
   <div class="col-xs-12">
      <div class="col-md-12 well">
         <i class="fa fa-mobile-phone"></i>
         <h3 class="title small"></h3>
         <p style="color: #d5d5d5"></p>
         <form id="add-form"  method="post">
            <input class="form-control"  required data-msg="Please enter First Name." type="text" id="fname" name="fname"   value=""   placeholder="Your First Name" autocomplete="off"   required /><br>
            <input class="form-control"  required data-msg="Please enter Email." type="email" id="email" name="email"  value=""  placeholder="Your Email" required /><br>
            <input class="form-control"  required data-msg="Please enter Mobile Number." type="text" id="Mnumber" name="Mnumber" value=""  placeholder="Your Mobile Number" required /><br>
            <input class="form-control"  required data-msg="Please enter Address." type="text" id="address" name="address" value=""  placeholder="Your Address" required /><br>
            <p align="left" style="color: #080808"></p>
            <input class="form-control"  required data-msg="Please enter Site Name." type="text" id="sitename" name="sitename" value=""  onkeyup="copyText()" placeholder="Your Site name" autocomplete="off" /><br>
            <div id="disp"></div>
            <input class="form-control"  required data-msg="Please enter Title." type="text" id="title" name="title" value=""  placeholder="Title of your Web Site" /><br>
            <input class="form-control"  required data-msg="Please enter Description." type="text" id="descr" name="descr" value=""  placeholder="Description of Web Site" /><br>
            <button class="btn btn-primary" type="submit" id="btn-signup" name="btn-signup" >Submit</button>
         </form>
      </div>
   </div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-2">
   <div class="col-xs-12">
      <div class="col-md-12 well text-center">
         <h2>Please Enter Your Mobile Number</h2>
         <br/>
         <input class="form-control"  required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value=""  placeholder="Your Mobile Number" required />
         <br/><br/>
         <button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup" >Continue</button>
      </div>
   </div>
</div>
<div class="row setup-content step hiddenstepInfo" id="step-3">
   <div class="col-xs-12">
      <div class="col-md-12 well text-center">
         <h2>Please Enter Verification Code</h2>
         <br/>
         <h4 >Check your mobile device, you will receive verification code from us,please enter it correctly in Following Text box</h4>
         <br/>
         <input class="form-control"  required data-msg="Please enter Mobile Number." type="text" id="Mnumber" maxlength="10" name="Mnumber" value=""  placeholder="Your Verification Code" required />
         <br/><br/>
         <button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup"  >Continue</button>
      </div>
   </div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-4">
   <div class="col-xs-12">
      <div class="col-md-12 well text-center" >
         <h2>Security Question</h2>
         <br>
         <p align="left">Security Question 1</p>
         <select class="form-control input-lg">
            <option value="What was the name of your first pet?">What was the name of your first pet?</option>
            <option value="Where did you first attend school?">Where did you first attend school?</option>
            <option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
            <option value="What is your favorite car model?">What is your favorite car model?</option>
         </select>
         <br>
         <p align="left">Enter Response</p>
         <input class="form-control input-lg">
         <br>
         <button class="btn btn-primary " type="submit" id="btn-signup" name="btn-signup"  >Continue</button>
      </div>
   </div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-5">
   <div class="col-xs-12">
      <div class="col-md-12 well text-center">
         <h1>STEP 5</h1>
         <h3 class="underline">Instructions</h3>
         Upload the application.
         This may require a confirmation email.
      </div>
   </div>
</div>
<div class="row setup-content step hiddenStepInfo" id="step-6">
   <div class="col-xs-12">
      <div class="col-md-12 well text-center">
         <h1>STEP 6</h1>
         <h3 class="underline">Instructions</h3>
         Send us feedback on the overall process.
         This step is not obligatory.
      </div>
   </div>
</div>
</div>
<script src="minify/rgen_min.js"></script>
<script async src="js/rgen.js"></script>
</body>
</html>

最佳答案

here is plunker针对你的问题

我已将 disabled 类添加到其他尚未完成的潜水。

如果上一节已完成，请编写脚本以删除下一个 disabled 类。

这是CSS

    .disabled {
         cursor: not - allowed;
         pointer - events: none;
         opacity: .65;
     }

修改了html代码

        <div class="row step">
        <div id="div1" class="col-md-2" onclick="javascript: resetActive(event, 0, 'step-1');">
            <span class="fa fa-file-text-o"></span>
            <p>Registration Form</p>
        </div>
        <div class="col-md-2 disabled" onclick="javascript: resetActive(event, 20, 'step-2');">
            <span class="fa fa-mobile-phone"></span>
            <p>Mobile Number</p>
        </div>
        <div class="col-md-2 disabled" onclick="javascript: resetActive(event, 40, 'step-3');">
            <span class="fa fa-search-plus"></span>
            <p>Security Question</p>
        </div>
        <div class="col-md-2 disabled" onclick="javascript: resetActive(event, 60, 'step-4');">
            <span class="fa fa-viacoin"></span>
            <p>Verification Code</p>
        </div>
        <div class="col-md-2 disabled" onclick="javascript: resetActive(event, 80, 'step-5');">
            <span class="fa fa-usd"></span>
            <p>Payment</p>
        </div>
        <div id="last" class="col-md-2 disabled" onclick="javascript: resetActive(event, 100, 'step-6');">
            <span class="fa fa-thumbs-up"></span>
            <p>Finish</p>
        </div>
    </div>

关于javascript - 如何在不完成 Bootstrap 中的一个步骤的情况下禁止进入下一步？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36951538/

27 4 0
文章推荐： php - 如何使用 php 在 RabbitMQ 中检索相同的消息两次或更多次
文章推荐： Mysql 其他表中未引用的行数
文章推荐： mysql - MariaDB 存储过程 - 在 INSERT 语句中出现错误 'Missing SELECT'
文章推荐： mysql - 从表中选择数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com