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！

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>

请问这是否有帮助。

选中和未选中滑块时

1 个答案: