Remover ou Adicionar a classe do segundo elemento filho

[NetBoy16 72]

Olá a todos, eu estou tendo dificuldade em fazer uma mudança em um form, já pesquisei maneiras mas não dá certo, tenho a seguinte situação:

 

 

Tem um formulário de cadastro de anúncio onde o cara pode se cadastrar escolhendo entre plano gratis ou pago, o gratis tem alguns campos e o pago tem esses campos mais alguns outros extras, os campos são obrigatórios, mas quando ele selecionar o gratis entào não posso obriga-lo a preencher um campo que não está disponível para ele.

 

No meu html os campos que pertencem ao plano pago estão dentro de uma div com a classe nt, então no meu arquivo functions.js eu crei o seguinte bloco de código:

 

$("#plano").change(function() {
		if($(this).children("option").val() == 'gratis') {
			$.each($("#frm_cadastro").find("div .nt")) {
				$($(this) + ":nth-child(2)").removeClass("required");
				$(this).hide();
			} 
		} else {
			$.each($("#frm_cadastro").find("div .nt")) {
				$($(this) + ":nth-child(2)").addClass("required");
				$(this).show();
			}
		}
	})

 

O que eu quis fazer é verificar o valor do option quando ele mudar o plano no select, então verifica, se for gratis vai remover a classe required do segundo filho que é o input ou textarea, pois o primeiro é a label, remover pois pode ser que ele já tenha escolhido o plano pago antes, pois de começo vem selecionado o gratis e esses campos vem sem a classe required, então ele esconde a as divs que contém esse campo, e no caso se for pago ele faz o processo contrário, já tentei com o :nth-child() e adicionando uma classe second a esses campos e no codigo fazendo o .find(".second"), mas nem um nem outro dá certo, alguém por favor poderia me ajudar ?

[ignoredxyz 17]

Substitua as linhas

$($(this) + ":nth-child(2)").removeClass("required");
$($(this) + ":nth-child(2)").addClass("required");

Por essas

$(this).children().children().removeClass("required");
$(this).children().children().addClass("required");

 

[NetBoy16 72]

Eu dei uma mudada no código:

 

	$("div.nt").each(function() {
		$(this).hide();
	});

	$("#plano").change(function() {
		if($(this).children("option").val() == 'gratis') {
			// $.each($("#frm_cadastro").find("div .nt")) {
			// } 
			$("#frm_cadastro > div .nt").each(function() {
				$($(this)+":nth-child(2)").removeClass("required");
				$(this).hide();
			});
		} else {
			$("#frm_cadastro > div .nt").each(function() {
				$($(this)+":nth-child(2)").addClass("required");
				$(this).show();
			});
		}
	});

Mas ainda não funfa :/

 

Substitua as linhas

$($(this) + ":nth-child(2)").removeClass("required");
$($(this) + ":nth-child(2)").addClass("required");

Por essas

$(this).children().children().removeClass("required");
$(this).children().children().addClass("required");

 

 

Mas se eu fizer isso ele vai adicionar e remover a classe required também no label, e provavelmente somente no primeiro filho que é a label por não estar em um each.

[ignoredxyz 17]

Voce vai substituir os codigos que estão dentro do each, consequentemente ele vai continuar dentro do each.

[NetBoy16 72]

 

Substitua as linhas

$($(this) + ":nth-child(2)").removeClass("required");
$($(this) + ":nth-child(2)").addClass("required");

Por essas

$(this).children().children().removeClass("required");
$(this).children().children().addClass("required");

 

 

Agora que reparei, vc usou .children() 2x, isso faria pegar o segundo filho ou pegaria o filho do filho ?

[ignoredxyz 17]

Nesse caso pegaria o filho do filho mas se você quiser pegar o segundo filho voce pode trocar

.children().children()

 

Por isso

.children().next()

[NetBoy16 72]

Atualmente meu código está assim:

 

$(document).ready( function() {
	//----------------------------Escolha do plano-------------------------------------
	//Esconde os campos do plano pago ao carregar a página
	$("div.nt").each(function() {
		$(this).hide();
	});

	$("#plano").change(function() {
		if($(this).children("option").val() == 'gratis') {
			// $.each($("#frm_cadastro").find("div .nt")) {
			// } 
			$("#frm_cadastro > div .nt").each(function() {
				$(this).children().next().removeClass("required");
				// $($(this)+":nth-child(2)").removeClass("required");
				$(this).hide();
			});
		} else {
			$("#frm_cadastro > div .nt").each(function() {
				$(this).children().next().addClass("required");
				// $($(this)+":nth-child(2)").addClass("required");
				$(this).show();
			});
		}
	});
});

Pelo menos as outras funcionalidades voltaram a funcionar, mas o proposito do formulário ainda não funciona, eu troco pra plano pago e ele não exibe os campos desse plano e nem adiciona a classe required =/

[NetBoy16 72]

Aeeeee consegui, sou foda u_u, sqn, hahahahaa

 

O problema é que eu estava checando o valor do option, mas acontece que tem mais de um option, então eu descobri que posso fazer o .val() do select que ele vai resgatar o valor do option que foi selecionado, também criei apenas uma div com a classe nt, pois os campos que sao do plano pago estavam todos um após o outro, então não havia necessidade de criar diversas divs, apenas uma e todos os campos do pago dentro dela assim o código ficou mais limpo, desse jeito:

 

//----------------------------Escolha do plano-------------------------------------
	//Esconde os campos do plano pago ao carregar a página
	$("div.nt").hide();

	$("#plano").change(function() {
		if($(this).val() == 'gratis') {
			// $.each($("#frm_cadastro").find("div .nt")) {
			// } 
			$("div .nt").children().each(function() {
				$(this).removeClass("required");
				// $($(this)+":nth-child(2)").removeClass("required");
				$("div .nt").hide();
			});
		} else {
			$("div .nt").children().each(function() {
				$(this).addClass("required");
				// $($(this)+":nth-child(2)").addClass("required");
				$("div .nt").show();
			});
		}
	});

 

Valeu pela ajuda de qualquer forma :D