javascript - .prop 不更新复选框的视觉样式

Question

我有两个复选框，我需要隐藏并取消选中一个，同时选中另一个。到目前为止，它以编程方式取消选中它，但对于用户来说不是视觉上的，因此如果复选框重新出现，它看起来像是被选中，但实际上并没有。

$(document).ready(function() {
  $("#remote-only-check").click(function() {
      if ($(this).is(':checked')) {
        $("#remote-ok-check").prop('checked', false);
        if (!$("#remote-ok-check").is(':checked')) {
          //this works!
          console.log("remote ok is switched off");
        }
        $("#remote-ok").removeClass("active");
      } else {
        $("#remote-ok").addClass("active");
      }
  });
});

input[type="checkbox"] {
  -webkit-appearance: none;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(0, 59, 222);
  border-image: initial;
  padding: 0px;
  transition: background-color 0.2s ease-in-out 0s;
}

input[type="checkbox"]:checked {
  background-color: rgb(0, 59, 222);
}

#remote-ok{
  visibility: hidden;
  opacity: 0; 
  transition: opacity .2s ease-out;
}

#remote-ok.active{
  visibility: visible;
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group standard">
  <label class="control-label" for="id_location">Location</label>
  <input placeholder="Toronto" type="text" name="location" id="id_location" required="" class=" form-control standard" maxlength="200">
  <label class="checkbox-inline" id="remote-only"><input type="checkbox" id="remote-only-check" value=""><span>Remote Only</span></label>
  <label class="checkbox-inline active" id="remote-ok"><input type="checkbox" id="remote-ok-check" value=""><span>Remote OK</span></label>
</div>

注意 .active 只是使用opacity 和visibility 隐藏了另一个复选框。

Answer 1

只是为了向您展示不使用 jQuery 是很容易的。

const remoteOnlyCheck = document.querySelector('#remote-only-check');
const remoteOkCheck = document.querySelector('#remote-ok-check');
const remoteOk = document.querySelector('#remote-ok');

remoteOnlyCheck.addEventListener('click', () => {
  console.log(remoteOnlyCheck.checked);
  if(remoteOnlyCheck.checked === true)
  {
    remoteOkCheck.checked = false;
    
    if( !remoteOkCheck.checked === true)
    {
      // this works
      console.log('remote is switched off');
    }
    
    remoteOk.classList.remove('active');
  } else {
    remoteOk.classList.add('active');
  }
});

input[type="checkbox"] {
  -webkit-appearance: none;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(0, 59, 222);
  border-image: initial;
  padding: 0px;
  transition: background-color 0.2s ease-in-out 0s;
}

input[type="checkbox"]:checked {
  background-color: rgb(0, 59, 222);
}

#remote-ok{
  visibility: hidden;
  opacity: 0; 
  transition: opacity .2s ease-out;
}

#remote-ok.active{
  visibility: visible;
  opacity: 1; 
}

<div class="form-group standard">
  <label class="control-label" for="id_location">Location</label>
  <input placeholder="Toronto" type="text" name="location" id="id_location" required="" class=" form-control standard" maxlength="200">
  <label class="checkbox-inline" id="remote-only"><input type="checkbox" id="remote-only-check" value=""><span>Remote Only</span></label>
  <label class="checkbox-inline active" id="remote-ok"><input type="checkbox" id="remote-ok-check" value=""><span>Remote OK</span></label>
</div>