Agregar validación condicional de jQuery a HTML generado dinámicamente

Question

Tengo el siguiente escenario 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>

Si la casilla de verificación N está marcada, el cuadro de texto N es un campo obligatorio.

Acabo de empezar a trabajar con una (la?) validación jQuery y estoy tratando de descubrir cómo lograr esta validación, que parece un poco más compleja que los ejemplos.

Conceptualmente creo que quiero agregar una clase CSS a mis casillas de verificación, luego usar addClassRules para agregar una regla personalizada. Sin embargo, el desafío es cómo especificar el cuadro de texto relevante para cada casilla de verificación.

Mi HTML se genera utilizando ASP.NET MVC, por lo que podría generar dinámicamente el JavaScript que especificaría una regla para cada casilla de verificación, pero esto parece un poco largo.

Answer 1

Resuelto, usando el siguiente enfoque ...

Actualicé mi HTML para incluir una clase CSS específica en mis cuadros de texto ( amount_text_box ), y utilicé el siguiente jQuery:

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

Una limitación es que esto solo se dispara cuando el foco sale del cuadro de texto; idealmente, la regla también se dispararía al hacer clic en la casilla de verificación.

Answer 2

He hecho algo similar, Richard. Aunque me detuve a la altura de la regla personalizada. Mi enfoque era agregar la clase 'requerida' a la etiqueta de entrada.

En términos de su selector, ¿podría no tener su cuadro de texto e ingresar " compartir " una clase exclusiva para ellos dice class0 .. classN y selecciona una entrada dentro de esa clase?

Bondad,

Dan