i have page multiple forms (all forms have same classes, unique ids). form has functionality people can enter starting , ending work date. there checkbox "i work here", , if checked, ending work date input field replaced word "present" instead.
clicking/toggling checkbox works fine each separate form. issue when checkbox in 1 form pre-checked, other forms have word 'present' if checkboxes in respective forms not checked.
here's jquery code:
$(document).ready(function () { if ($('.checkbox-present').length) { var presentcheckbox = $('.checkbox-present'); var endyear = $(presentcheckbox).parents('.checkbox-parent').find('.position-end'); if ($(presentcheckbox, endyear).is(':checked')) { $('.form-group', endyear).hide(); $(endyear).append('<p class="position-present">present</p>'); } } else { $('.position-present', endyear).remove(); $('.form-group', endyear).show(); } }); $('.checkbox-present').change(function () { var endyear = $(this).parents('.checkbox-parent').find('.position-end'); if ($(this).is(':checked')) { $('.form-group', endyear).hide(); $(endyear).append('<p class="position-present">present</p>') } else { $('.position-present', endyear).remove(); $('.form-group', endyear).show(); } }); as can see fiddle, form 2 has word "present" if checkbox unchecked. i'm it's because of checkbox in form 1.
how fix this? i'm still finding way around jquery i'm not sure how solve this, think has binding?
the problem way checking checked condition, if of checkbox checked select of them
$(document).ready(function () { if ($('.checkbox-present').length) { var presentcheckbox = $('.checkbox-present:checked'); if (presentcheckbox.length) { var endyear = $(presentcheckbox).parents('.checkbox-parent').find('.position-end'); $('.form-group', endyear).hide(); $(endyear).append('<p class="position-present">present</p>'); } } else { $('.position-present', endyear).remove(); $('.form-group', endyear).show(); } }); demo: fiddle
but instead of repeating logic again can
$(document).ready(function() { $('.checkbox-present').change(function() { var endyear = $(this).closest('.checkbox-parent').find('.position-end'); if (this.checked) { $('.form-group', endyear).hide(); $(endyear).append('<p class="position-present">present</p>') } else { $('.position-present', endyear).remove(); $('.form-group', endyear).show(); } }).filter(':checked').change(); });section { margin-bottom: 2em; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="clearfix"> <h3>form 1</h3> <div class="form-group"> <label class="col-sm-3 control-label">time period</label> <div class="col-sm-9 checkbox-parent"> <div class="col-xs-12"> <input type="checkbox" class="checkbox-present" checked/> <label for="work-1">i work here</label> </div> <div class="position-start col-xs-4"> <div class="form-group"> <select class="form-control"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> </select> </div> <div class="form-group"> <select class="form-control"> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option>2015</option> </select> </div> </div> <div class="col-xs-2"> <p>to</p> </div> <div class="col-xs-4 position-end"> <div class="form-group"> <select class="form-control"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> </select> </div> <div class="form-group"> <select class="form-control"> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option>2015</option> </select> </div> </div> </div> </div> </section> <section class="clearfix"> <h3>form 2</h3> <div class="form-group"> <label class="col-sm-3 control-label">time period</label> <div class="col-sm-9 checkbox-parent"> <div class="col-xs-12"> <input type="checkbox" class="checkbox-present" /> <label for="work-2">i work here</label> </div> <div class="position-start col-xs-4"> <div class="form-group"> <select class="form-control"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> </select> </div> <div class="form-group"> <select class="form-control"> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option>2015</option> </select> </div> </div> <div class="col-xs-2"> <p>to</p> </div> <div class="position-end col-xs-4"> <div class="form-group"> <select class="form-control"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> </select> </div> <div class="form-group"> <select class="form-control"> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option>2015</option> </select> </div> </div> </div> </div> </section>
Comments
Post a Comment