如果选中复选框,则仅更改该项目的样式

Question

我正在创建一个复选框列表,当有人检查复选框时,我需要它来将文本从挂起更改为完成,并将背景更改为绿色.我已经设法使用jQuery完成所有工作.

除了它为每个复选框容器设置样式,而不仅仅是选中的容器.我该如何解决这个问题？如果有人在之后再次取消选中该复选框,我怎样才能将其更改回原始样式？

到目前为止这是我的代码:

$('.custom-control-input').click(function(){
    if (this.checked) {
        $('.pending').css('display', 'none')
        $('.done').css('display', 'block')
        $('.list-group-item').css('background-color','#4CAF50')
    }
})

.done {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<ul class="list-group">
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
</ul>

Answer 1

添加$(this).closest('.list-group-item')以更改checkedcheckbox的唯一父级的背景

$('.custom-control-input').click(function(){
        $(this).closest('.list-group-item').find('.pending').css('display', (this.checked)?'none':'block')
        $(this).closest('.list-group-item').find('.done').css('display', (this.checked)?'block':'none')
        $(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
})

.done {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<ul class="list-group">
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
  </div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
  <li class="list-group-item">
    <div class="form-check">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description ml-4">Checkbox</span>
    </label>
</div> <!-- /.form-check -->
    <div class="ml-auto status">
      <p class="mb-0 done">done</p>
      <p class="mb-0 pending">pending</p>
    </div>
  </li>
</ul>