Validación Jquery: agregar/eliminar reglas dinámicamente en función de la selección desplegable

Question

Tengo un selector desplegable, con valores de 1-4. Dependiendo de la selección, las entradas subsiguientes en el formulario se ocultan y la validación requerida se elimina de cada una. por ejemplo, si se selecciona 2, se muestran las entradas 1-2 y se agrega la validación requerida, mientras que 3-4 están ocultas y se elimina la validación.

$("#dropdownSelector").change(function() { 
inputtohide = $(this).val(); 
$('input[id*=conviction]').slice(0, inputtohide).show().rules("add", {required: "#convictions_0:checked" }); 
$('input[id*=conviction]').slice(inputtohide, 4).hide().rules("remove", {required: "#convictions_0:checked" }); 
$("#thisform").validate(); 
}); 

Esto funciona bien, sin embargo (como la documentación de los estados de validación de plug-in) validación sólo se añade para el elemento primera devuelto.

que entiendo de otros mensajes, que el siguiente código de validación debe añadir a cada entrada: -

$("#thisform").validate(); 
$("input[id*=conviction]").each(function() { 
    $(this).rules("add", {required: "#convictions_0:checked" }); 

    }); 

Mi pregunta es ¿cómo combino los dos bits de código? Cualquier ayuda muy apreciada, gracias.

Answer 1

Usted sólo tendrá que usar la función .each() en su resultado .slice() con el fin de iterar sobre todos los elementos que devuelve:

$('input[id*=conviction]').slice(0, inputtohide).each(function(){ 
    $(this).show().rules("add", {required: "#convictions_0:checked" }); 
}); 

$('input[id*=conviction]').slice(inputtohide, 4).each(function(){ 
    $(this).hide().rules("remove", {required: "#convictions_0:checked" }); 
}); 

Espero que esto ayude!