Регистрация формы с несколькими шагами?

Question

У меня есть несколько форм, которые я использовал для создания рекламы для моего клиентского сайта. Как отключить другие ссылки до тех пор, пока пользователь не заполнит первую форму? Посмотрите мои изображения.

Это то, чего я хочу достичь.

Вот мой HTML код

<div class="col-md-12"> 
<div class="col-md-4"> 
    <div class="post-new-ad-link"> 
     <a href="#">Post free ad</a> 
    </div> 

    <div class="other-links"> 
     <ul> 
      <li> 
       <a href="#"> 
        <i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i>&emsp;Basic details</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i>&emsp;Images</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-money fa-lg fa-fw" aria-hidden="true"></i>&emsp;Price</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-map-marker fa-lg fa-fw" aria-hidden="true"></i>&emsp;Location</a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i>&emsp;Contact and status</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

.post-new-ad-link { 
    border-left: 1px solid #e0e0e0; 
    border-right: 1px solid #e0e0e0; 
    border-top: 1px solid #e0e0e0; 
    border-bottom: 0; 
    font-size: 1.7rem; 
    text-align: center; 
    background: #53bff7; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
} 
.post-new-ad-link a { 
    transition: all 0.5s ease; 
    color: #fff; 
    display: block; 
    padding: 50px; 
} 
.other-links { 
    border-left: 1px solid #e0e0e0; 
    border-right: 1px solid #e0e0e0; 
    border-top: 0; 
    border-bottom: 1px solid #e0e0e0; 
    background: #fff; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
} 
.other-links ul { 
    list-style-type: none; 
    padding: 0; 
} 
.other-links li { 
    font-size: 1.5rem; 
} 
.other-links li a { 
    padding: 15px 0 15px 20px; 
    display: block; 
    color: #666666; 
    transition: all 0.5s ease; 
} 
.other-links li a:hover { 
     text-decoration: none; 
     background:#ddd; 
} 

Fiddle

Любой вариант JQuery или другой?

Answer 1

Событие указателя: ни один из них не должен делать трюк. Я изменил ваш HTML и CSS-файл, чтобы добиться того же. Вы должны написать свою собственную логику при каком событии (завершении), должен быть включен следующий li. В настоящее время я написал логику для включения второго li на клик первого li. Чтобы включить третий li, вы должны щелкнуть второй ли ...

Обязательно добавьте атрибут с отключенным доступом к тегу <li>.

Fiddle