CODEWITHSUNDEEP
jquery
zoneqt
zoneqt

Reputation: 5

Jquery attr('checked') issue

Hello guys i'm beginner at JS/jQuery, i'm having problem with adding checked attribute to input.

$(".switch-label-2").click(function () {
    var span = $(this).parent().siblings('#reminderstatus');
    var status = span.html().trim() == "OFF" ? "ON" : "OFF";
    var color = span.html() == "ON" ? "#a2a2a2" : "#89c12d";
    span.html(status);
    span.css('color', color);
    console.log(status);
    if (status == "ON") {
        $("#switch-2").attr('checked', true);
    } else {
        $("#switch-2").attr('checked', false);
    }
});
.box {
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.remindertoggle {
    text-align: center;
    margin: 10px 0;
}

#reminderstatus {
    color: #a2a2a2;
    margin-right: 5px;
}
.switch {
    position: relative;
    display: inline-block;
}

.switch-label-2 {
    margin-bottom: 0;
    display: block;
    width: 48px;
    height: 24px;
    text-indent: -150%;
    clip: rect(0 0 0 0);
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .switch-label-2:before,
    .switch-label-2:after {
        content: "";
        display: block;
        position: absolute;
        cursor: pointer;
    }

    .switch-label-2:before {
        width: 100%;
        height: 24px;
        background-color: #dedede;
        border-radius: 9999em;
        -webkit-transition: background-color 0.25s ease;
        transition: background-color 0.25s ease;
    }

    .switch-label-2:after {
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        /*background-color: #fff;*/
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
        -webkit-transition: left 0.25s ease;
        transition: left 0.25s ease;
    }

.switch-input:checked + .switch-label-2:before {
    background-color: #89c12d;
}

.switch-input:checked + .switch-label-2:after {
    left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
    <div class="remindertoggle">
        <span id="reminderstatus">OFF</span>                                         
        <div id="switch" class="switch">                                      
            <input id="switch-2" type="checkbox" class="switch-input">                                      <label for="switch-2" class="switch-label-2">Switch</label>   
        </div>                                  
    </div> 
</div>

You will notice when i click toggle label everything got change as needs to be except one thing , on first click it add attribute check to input put it doesn't check the chekbox for real.

I'm confused couldn't solve this all day , i've googled around and couldn't find the answer.

Further thanks for any information and suggestions.

Upvotes: 0

Views: 57

Answers (2)

phuzi
phuzi

Reputation: 13059

You'll need to use the prop(...) function to check and set the appropriate values.

You should also prevent the event from bubbling with preventDefault as this was causing the weirdness on first click.

$(".switch-label-2").click(function(e) {
  e.preventDefault();
  
  var isOn = $("#switch-2").prop('checked');

  // flip text status
  $('#reminderstatus').text(isOn ? "OFF" : "ON");
  
  // flip checked status
  $("#switch-2").prop('checked', !isOn);
});
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.remindertoggle {
  text-align: center;
  margin: 10px 0;
}

#reminderstatus {
  color: #a2a2a2;
  margin-right: 5px;
}

.switch {
  position: relative;
  display: inline-block;
}

.switch-label-2 {
  margin-bottom: 0;
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch-label-2:before,
.switch-label-2:after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label-2:before {
  width: 100%;
  height: 24px;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

.switch-label-2:after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /*background-color: #fff;*/
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked+.switch-label-2:before {
  background-color: #89c12d;
}

.switch-input:checked+.switch-label-2:after {
  left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

  <div class="remindertoggle">
    <span id="reminderstatus">OFF</span>
    <div id="switch" class="switch">
      <input id="switch-2" type="checkbox" class="switch-input">
      <label for="switch-2" class="switch-label-2">Switch</label>
    </div>
  </div>

</div>

Upvotes: 1

ADyson
ADyson

Reputation: 61914

This version fixes the appearance (hiding the underlying checkbox), the colours of the switch appear correctly every time, and also uses the .prop() method to set the property correctly, as described in the jQuery documentation (see http://api.jquery.com/attr/). A couple of other minor things are also tidied up / simplified.

$(".switch-label-2").click(function(e) {
  e.preventDefault();
  var span = $('#reminderstatus');
  var status = span.text().trim() == "OFF" ? "ON" : "OFF";
  var color = status == "OFF" ? "#a2a2a2" : "#89c12d";
  span.html(status);
  span.css('color', color);
  if (status == "ON") {
    $("#switch-2").prop('checked', true);
  } else {
    $("#switch-2").prop('checked', false);
  }
});
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.remindertoggle {
  text-align: center;
  margin: 10px 0;
}

#reminderstatus {
  color: #a2a2a2;
  margin-right: 5px;
}

.switch {
  position: relative;
  display: inline-block;
}

.switch-label-2 {
  margin-bottom: 0;
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.switch-label-2:before,
.switch-label-2:after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label-2:before {
  width: 100%;
  height: 24px;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

.switch-label-2:after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /*background-color: #fff;*/
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.switch-input:checked+.switch-label-2:before {
  background-color: #89c12d;
}

.switch-input:checked+.switch-label-2:after {
  left: 30px;
}

#switch-2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <div class="remindertoggle">
    <span id="reminderstatus">OFF</span>
    <div id="switch" class="switch">
      <input id="switch-2" type="checkbox" class="switch-input"> <label for="switch-2" class="switch-label-2">Switch</label>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions