如果选中复选框，由id选择，如何更改背景颜色

Question

When a particular checkbox is selected I am trying to change its color. I tried doing this solely by making use of CSS, however this will result in the changing of colors for all <div> elements.

Most of the CSS I used is from Material Design. I tried to add my own custom class:

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

.form-check .form-check-sign .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

.form-check .form-check-sign .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  color: #fff;
  height: 0;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  animation: checkboxOff 0.3s forwards;
}

.form-check .form-check-input:focus+.form-check-sign .check:after {
  opacity: 0.2;
}

.form-check .form-check-input:checked+.form-check-sign .check {
  background: #00BCD4;
}

.form-check .form-check-input:checked+.form-check-sign .check .red {
  background: #FF0000;
}

.red {
  background: #FF0000;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" disabled value="1"'.$checkederr.'>
    <span class="form-check-sign">
    <span class="check"></span>
    </span>
  </label>
</div>

Somehow all checkboxes and <span> elements (containing the .chek class) are selected in red.

The code php for '.$checkederr.' is:

while($row == $querydoc -> fetch(PDO::FETCH_ASSOC))
{
  ...
  if($row['errato'] == 1)
    $checkederr="checked";
  else
    $checkederr="";
}

Adding a class in a given <span> tag like "check red" only allows for the opposite that I want.

</div>

Answer 1

1. Input checkbox should be like this, check checkederr how I am using.

   <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">
   

2. remove the disabled from the input.

3.You have the 2 openening braces here if($(this).is(":checked")) { { they should be if($(this).is(":checked")) {

Error Free Code:- (Include the CSS at the bottom)

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">
    <span class="form-check-sign">
      <span class="check"></span>
    </span>
  </label>
</div>

</div>