I have some conditional form inputs. Everything is working, except for my conditional checkboxes. The item for checkboxes shows, even when that condition is not selected.
jQuery(document).ready(function($) {
// bind event handler to the checkbox
$('input[name="Active_Status_Change"]').change(function() {
// get input element where name attribute is starts with the checkbox value
// and then toggle the visibility based on the checked property
$('[name^="' + this.value + '"]').toggle(this.checked);
// trigger the change event
}).change();
});
$(document).ready(function() {
$("#datepicker5").datepicker();
});
<link rel="stylesheet" href="http://ift.tt/1FyNyxl">
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/2a1Bldc"></script>
<script src="http://ift.tt/1LdO4RA"></script>
<script src="http://ift.tt/1FyNyNz"></script>
<form>
<input name="Active_Status_Change" type="checkbox" value="Location" />Location
<input name="Active_Status_Change" type="checkbox" value="Level of Care" />Level of Care
<input name="Active_Status_Change" type="checkbox" value="Diagnosis" />Diagnosis
<div id="Location">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"> <span style="width:25%; float:left">
<select name="Location From_Place" class="validate[required]" id="Location From_Place">
<option selected="selected">From</option>
<option value="Home">Home</option>
<option value="Hospital">Hospital</option>
<option value="Nursing Home">Nursing Home</option>
<option value="Assisted Living">Assisted Living</option>
</select> </span>
<span style="width:25%; float:left">
<select name="Location To_Place" class="validate[required]" id="Location To_Place">
<option selected="selected">To</option>
<option value="Home">Home</option>
<option value="Hospital">Hospital</option>
<option value="Nursing Home">Nursing Home</option>
<option value="Assisted Living">Assisted Living</option>
</select> </span></div> </div>
<div id="Level of Care"> <div style="width:100%; margin-bottom:15px; margin-top:15px;"id="Level of Care">
<span style="width:25%; float:left">
<select name="Level of Care_From" class="validate[required]" id="Level of Care_From">
<option selected="selected">From</option>
<option value="Routine">Routine</option>
<option value="Inpatient">Inpatient</option>
<option value="Respite">Respite</option>
<option value="Continuous">Continuous</option>
</select>
</span> <span style="width:25%; float:left">
<select name="Level of Care_To" class="validate[required]" id="Level of Care_To">
<option selected="selected">To</option>
<option value="Routine">Routine</option>
<option value="Inpatient">Inpatient</option>
<option value="Respite">Respite</option>
<option value="Continuous">Continuous</option>
</select>
</span>
<span style="width:25%; float:left"><strong>Did Location Change</strong> <br />
<input name="Level of Care_Location Change" type="radio" value="Yes" /> Yes <input name="Level of Care_Location Change" type="radio" value="No" />No</span></div></div>
<div id="Diagnosis">
<input id="Diagnosis1" name="Diagnosis_old" placeholder="Old Diagnosis" type="text" />
<input id="Diagnosis2" name="Diagnosis_new" placeholder="New Diagnosis" type="text" />
<input id="datepicker5" name="Diagnosis_Date" placeholder="Date of Change" type="text" />
</div>
</form>
So basically the issue is why is Did Location Change showing all the time? It should only show when Level of Care is Selected.
Aucun commentaire:
Enregistrer un commentaire