Добавление условной проверки jQuery в динамически генерируемый HTML

Question

У меня есть следующий сценарий HTML:

<div>
    <input id="txt0" type="text" /><input type="checkbox" id="chk0" /></div>
<div>
    <input id="txt1" type="text" /><input type="checkbox" id="chk1" /></div>
<!-- etc -->
<div>
    <input id="txtN" type="text" /><input type="checkbox" id="chkN" /></div>

Если флажок N установлен, то текстовое поле N является обязательным для заполнения.

Я только начал работать с (?) jQuery validation модулем и пытаюсь выяснить, как добиться этой проверки, которая кажется немного более сложной, чем примеры.

Концептуально, я думаю, что хочу добавить класс CSS к своим флажкам, а затем использовать addClassRules, чтобы добавить пользовательское правило. Однако проблема заключается в том, как указать соответствующее текстовое поле для каждого флажка.

Мой HTML генерируется с использованием ASP.NET MVC, поэтому я мог динамически генерировать JavaScript, который бы указывал правило для каждого флажка, но это выглядит немного затянуто.

Answer 1

Решено, используя следующий подход ...

Я обновил свой HTML, чтобы включить в мои текстовые поля определенный класс CSS (amount_text_box), и использовал следующий jQuery:

$.validator.addClassRules("amount_text_box", { required: function(element) {
    var chkId = element.id.replace(/txt/, "#chk");
    return $(chkId)[0].checked;
}

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

Answer 2

Я сделал то же самое, Ричард. Хотя я остановился, если не считать пользовательского правила. Мой подход состоял в том, чтобы добавить класс 'required' к тегу ввода.

С точки зрения вашего селектора, вы не могли бы иметь свое текстовое поле и вводить "поделиться" уникальным для них классом, скажем class0 .. classN, и выбрать вход в этом классе?

Доброжелательность,

Dan