jQuery - 一种形式正在影响另一种形式

Question

我有一个包含多个表单的页面（所有表单都有相同的类，只有唯一的ID）。表单具有人们可以输入其开始和结束工作日期的功能。还有一个“我目前在这里工作”的复选框，如果选中，则结束工作日期输入字段将替换为“现在”一词。

单击/切换复选框对每个单独的表单都可以正常工作。问题是，当预先检查一个表单中的复选框时，即使未检查相应表单中的复选框，所有其他表单都会显示“现在”一词。

这是我的jQuery代码：

$(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();
    }
});

Fiddle here to properly see the effect.

正如您可以从小提琴中看到的那样，即使其复选框未选中，表单2也会显示“存在”一词。我确定这是因为Form 1中的复选框。

我该如何解决这个问题？我仍然在寻找jQuery的方法，所以我不知道如何解决这个问题，但我认为它与绑定有关？

Answer 1

问题在于您检查已检查条件的方式，如果选中任何复选框，它将选择所有这些

$(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();
    }
});

演示：Fiddle

但不是重复逻辑，你可以

＆＃13;

＆＃13;

$(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();
});

＆＃13;

section {
  margin-bottom: 2em;
}

＆＃13;

<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 currently 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 currently 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>

＆＃13;

＆＃13;

＆＃13;