lundi 11 décembre 2017

Show / Hide multiple div and disable hidden input with multiple checkboxes JavaScript

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