Show div on radio button checked
HTML
<div id="main">
<label for="Materiaal">Materiaal</label>
<input type="text" name="Materiaal" id="Materiaal">
</div>
<div id="main">
<label for="Kleur">Kleur</label>
<input type="text" name="Kleur" id="Kleur">
</div>
<div id="main">
<label for="Afwerking">Afgewerkt</label>
<input type="radio" name="afwerking" id="afwerkingChecked" value="Ja" checked />
<label for="afwerkingchecked" class="radio">Ja</label>
<input type="radio" name="afwerking" id="afwerkingUnchecked" value="Neen" />
<label for="afwerkingUnchecked" class="radio">Neen</label>
</div>
<div id="divJa">
<label for="cutback">Type afwerking</label>
<input type="text" name="" id="" maxlength="8" placeholder="stain glaze/opbak.." value="" />
</div>
<div id="divNee">
<input type="radio" name="cutback" id="cutbackChecked" value="Ja" checked />
<label for="anatomischChecked">Anatomisch</label>
<input type="radio" name="cutback" id="cutbackUnchecked" value="Neen" />
<label for="cutback">Cutback</label>
<input type="text" name="cutback" id="cutback" disabled maxlength="8" placeholder="incisaal/gingiva.." value="" />
</div>
CSS
body {
padding:1em;
font-family:sans-serif;
}
div {
background:#F3F3F3;
padding:1em;
margin: 1em;
}
input {
padding:.5em;
}
label { display: inline-block; width: 150px; }
JavaScript
function switchVar() {
if($("#afwerkingUnchecked").prop("checked"))
$("#divJa").hide();
else
$("#divJa").show();
if($("#afwerkingChecked").prop("checked"))
$("#divNee").hide();
else
$("#divNee").show();
}
function switchVar2() {
if($("#cutbackUnchecked").prop("checked"))
$("#cutback").prop('disabled', false);
else
$("#cutback").prop('disabled', true);
}
$(document).ready(function() {
switchVar();
$("input[name=afwerking]").change(switchVar);
$("input[name=cutback]").change(switchVar2);
});