巡视时禁用突出显示的表单

Question

我有一个 bootstrap 表单导览，当页面加载时它会突出显示表单。我想在 highlighted.The 用户不应该输入值时禁用表单。代码：

 <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

Firstly add disabled with the select or readonly in textbox case

<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');
   });
 });

巡视时禁用突出显示的表单

Disable the highlighted form when it is in tour

css

twitter-bootstrap

intro.js