I am new to JavaScript and have working code for 1 div hide/show if the correct 2 checkbox checked but cannot get additional checkboxes to work. I have no errors, just does not show other hidden div.
$(function() {
var checkboxstat = $("#triggerSTAT");
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
var hidden_f = $("hidden_field");
var checkbox2 = $("#trigger2");
var nogales = $("#hidden_nogs");
var nogi = $("#hidden_nogi");
hidden.hide();
nogales.hide();
checkbox.change(function() {
if($('#trigger').is(':checked') && $('#triggerSTAT').is(':checked')) {
hidden.prop('disabled', false).show();
hidden_f.prop('disabled', false);
} else {
hidden.prop('disabled', true).hide();
hidden_f('disabled', true);
$("#hidden_field").disabled("disabled");
} else
if($('#trigger2').is(':checked') && $('#triggerSTAT').is(':checked')) {
nogales.prop('disabled', false).show();
nogi.prop('disabled', false); }
} else {
nogales.prop('disabled', true).hide();
nogi('disabled', true);
$("#hidden_nogi").disabled("disabled");
}
});
});
I need to have 5 combinations of checkbox checked with #triggerSTAT i.e. #trigger3 && #triggerSTAT.
<div class="col-sm-10 col-sm-offset-2 " >
<label class="checkbox-inline">
</label>
<input class="checkbox-inline " type="checkbox" name="SO" id="triggerSTAT" value="<? echo $SO ?>"/> </div>
<div class="col-xs-5 text-center">
<label class="checkbox-inline">
<input type="checkbox" id="trigger" name="CNF" value="01"/>
1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="CNF" id="trigger2" value="02"/>
2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="CNF" id="trigger3" alue="03"/>
3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="CNF" id="trigger4" value="04"/>
4
</label>
<label class="checkbox-inline">
<input type="checkbox" name="CNF" id="trigger5" value="05"/>
5
</label>
</div>
</div>
<div class="col-xs-5" id="hidden_fields">
<input class="form-control input-sm text-center" id="hidden_field" name="DOG" type="hidden" value="<? echo $DOG ?>"/>
</div><div class="col-xs-5" id="hidden_nogs">
<input class="form-control input-sm text-center" id="hidden_nogi" name="NOG" type="hidden" value="<? echo $NOG?>"/>
</div><div class="col-xs-5" id="hidden_sierv">
<input class="form-control input-sm text-center" id="hidden_srv" name="SRV" type="hidden" value="<? echo $SRV?>"/>
</div><div class="col-xs-5" id="hidden_saff">
<input class="form-control input-sm text-center" id="hidden_sfrd" name="SAF" type="hidden" value="<? echo $SAF?>"/>
</div><div class="col-xs-5" id="hidden_catl">
<input class="form-control input-sm text-center" id="hidden_cat" name="CAT" type="hidden" value="<? echo $CAT?>"/>
It appears my problem is when I add the }else if. Any help would be appreciated.
Aucun commentaire:
Enregistrer un commentaire