Convalida Jquery: aggiunta/rimozione di regole Dinamicamente in base alla selezione a discesa

Question

Ho un selettore a discesa, con valori da 1 a 4. A seconda della selezione, gli input successivi nel modulo sono nascosti e la convalida richiesta viene rimossa da ciascuno. Ad esempio, se si seleziona 2, vengono visualizzati gli ingressi 1-2 e viene aggiunta la convalida mentre 3-4 sono nascosti e la convalida rimossa.

$("#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(); 
}); 

Questo funziona bene, tuttavia convalida (come la documentazione per gli stati del plugin di convalida) viene aggiunto solo per l'elemento prima restituito.

Ho capito da altri posti, che il seguente codice dovrebbe aggiungere convalida per ciascun ingresso: -

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

    }); 

La mia domanda è come faccio a combinare i due bit di codice? Qualsiasi aiuto molto apprezzato, grazie.

Answer 1

È sufficiente utilizzare la funzione .each() sul .slice() risultato per iterare su tutti gli elementi che ritorna:

$('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" }); 
}); 

Spero che questo aiuti!