Question

当页面加载时，我有一个带有表单的引导程序，它突出显示表单。我希望在突出显示时禁用表单。用户不应该键入值。代码：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/introjs.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/intro.min.js"></script>

     <div class="card " id="div3" data-step="2" data-intro="Tell us.">    
          <ul class="list-group list-group-flush">
            <li class="list-group-item pslist-group-item">
              <div class="row ">
                  <div class="col-md-10 col-xs-12 ">
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-12 ">
                          <select class="selectpicker" name="b" id="b" required>
                            <option value="1">1 </option>
                              <option value="2" >2</option>
                          </select>
                        </div>
                      </div>                                      
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-12 ">
                          <select class="selectpicker" name="ex" id="ex" required>
                            <option value="a">a </option>
                            <option value="b">b</option>
                            <option value="c">c </option>
                          </select>
                        </div>
                      </div>
                    </div> 
                  </div>
              </div>
            </li>                      
          </ul>
      </div>

脚本：

<script type="text/javascript">
      window.onload = function () {
          javascript:introJs().start();
      };
  </script>

以下是我参考代码的参考link。谁能告诉我怎么做。

Answer 1

首先在disabled中添加select或readonly textbox 情况下

<select class="selectpicker" name="b" id="b" required disabled>
    <option value="1">1 </option>
    <option value="2" >2</option>
</select>

因此，当页面加载introJs()时，默认情况下会禁用它。

现在，当点击突出显示叠加时，请编写Jquery以删除属性。

$(document).ready(function() {
    $('body').on('click', '.introjs-overlay', function() {
        $('select').removeAttr('disabled');
        $('input').removeAttr('readonly');
   });
 });

在巡视中禁用突出显示的表单

1 个答案: