когда слайдер отмечен и не отмечен

Question

Я пытаюсь что-то сделать, когда слайдер не проверен и не проверен.

У меня много вопросов по стеку, но ни один из них, похоже, не работает для меня. Это то, что я уже пробовал:

$(function() {
    $('.slider').on('click', (event) => {
        console.log(event);
        $("#checkout-ms").css("border-color", "#bf0d33");
        $("#checkout-ms").prop('disabled', false);
    });
});

это хорошо работает, когда я проверяю слайдер, но ничего не делает, когда я снимаю галочку с слайдера. Я пробовал это также:

$(function() {
    $('.slider').on('change', function(e) {
        if($(this).is(':checked')) {
            $("#checkout-ms").css("border-color", "#bf0d33");
            $("#checkout-ms").prop('disabled', false);
      } else {
        $("#checkout-ms").css("border-color", "#605e5e");
        $("#checkout-ms").prop('disabled', true);
      }
    });
});

вот HTML для слайдера:

<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>

Я хочу, чтобы что-то происходило, когда я проверял слайдер, и что-то происходило, когда я снимал флажок.

Любая помощь приветствуется. Спасибо <3! </p>

Answer 1

Что я думаю, ты выглядишь примерно так.

$('.slider').click(function() {
  var checkbox = $('input[type="checkbox"]');
  if ($(checkbox).prop('checked')) {
    console.log("Was Checked");
    //do stuffs
  } else {
    console.log("Was Not Checked");
    //do stuffs
  }
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 10px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

input:checked+.slider {
  background-color: #2196f3;
}

input:focus+slider {
  box-shadow: 0px 0px 1px #2196f3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>

Дайте мне знать, если это полезно или нет.