Контрольный список полей формы jQuery

Question

У меня есть форма и я хочу отобразить контрольный список, который будет просто списком элементов, чтобы показать пользователю, какие разделы были заполнены. Я хочу иметь возможность применять класс css к каждому элементу списка, который будет показывать галочку или крестик в зависимости от того, были ли заполнены эти поля формы следующим образом;

<ul class="summary">
    <li class="complete">Resort</li>
    <li class="complete">General Information</li>
    <li class="complete">Accommodation</li>
    <li class="incomplete">Resort Features/Services</li>
    <li class="incomplete">Resort Extras &amp; Amenities</li>
</ul>

В некоторых случаях может быть несколько полей формы для каждого раздела, чтобы определить, отображать ли галочку или крестик.

Интересно, кто-нибудь делал что-то подобное раньше или знает какие-нибудь примеры?

Спасибо.

Answer 1

Вы бы использовали jQuery для проверки / определения полноты каждого раздела.

Затем вы должны поменять класс соответствующего элемента списка. Я бы дал каждому класс для его идентификации:

<ul class="summary">
<li class="summary-resort">Resort</li>
<li class="summary-general">General Information</li>
<li class="summary-accomodation">Accommodation</li>
<li class="summary-features">Resort Features/Services</li>
<li class="summary-extras">Resort Extras &amp; Amenities</li>
</ul>

Тогда простая строка jQuery:

...if summary-resort section is complete...
$(".summary-resort").addClass("complete")

Answer 2

Я думаю, что изменить класс элемента легко с Jquery. попробуйте это (с идентификатором для каждого элемента):

$("#li_1").removeClass("complete");
$("#li_1").addClass("incomplete"); 

Но откуда вы знаете, что раздел закончен? С событиями в форме? из информации в базе данных?