Estou tentando fazer uma verificação com um Bootstrap Wizard
que estou usando, preciso que os passos sejam habilitados se determinados checks
estiverem marcados, senão estiverem o passo seguinte não poderá ser habilitado.
Tenho esses passos no formulário:
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1">
<a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
</li>
</ul>
<div class="clearfix"></div>
A minha tentativa em fazer essa verificação está assim:
if($("#CheckTermo1").is(':checked')){ if("data-target" == "#tab2"){ $(".next").prop("disabled", true); } else { $(".next").attr("disabled",false); } }
Tenho os CheckTermo1
que marcado deverá habilitar o step2
, o CheckTermo2
habilitará o step3
e o CheckTermo3
habilitará o step4
.
Os checks estão assim:
<input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
<input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
<input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
.next
?class="active"
de acordo com o checkbox marcado?#step2
e não como#tab2
. O#tab2
está no href. Tem algo a ver?