title: toggle button with validation
body: <p>I'm building an application where power needs to be set on or off via a web browser. I have a toggle button working but at "off", I would like some  validation. The toggle button is created through a checkbox method.</p>
  
  <p>How can I add validation that if user clicks "OK", the power goes off, but on "Cancel", checkbox should not be unchecked?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var X = 0;
  
    if (checkBox.checked == true) {
      X = 1;
      alert("power on " + X); // only for test
    };
  
    if (checkBox.checked == false) {
      //     alert("power off" );
      return confirm("This will shutdown power!. Are you sure?")
  
      if ($(X = 1))
        return true;
      //      ('.myCheck').prop('unchecked')
      //       ('#switch-input').prop('checked', true);
      //       $(checkBox.prop('checked', true);
      else
        return false;
    };
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Toggle switch Flat
  ==========================*/
  
  .switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 100px;
    height: 30px;
    padding: 3px;
    margin: 0;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-sizing: content-box;
  }
  
  .switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing: content-box;
  }
  
  .switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    box-sizing: content-box;
  }
  
  .switch-label:before,
  .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
    box-sizing: content-box;
  }
  
  .switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaaaaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  }
  
  .switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: #FFFFFF;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
  }
  
  .switch-input:checked~.switch-label {
    background: #E1B42B;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
  }
  
  .switch-input:checked~.switch-label:before {
    opacity: 0;
  }
  
  .switch-input:checked~.switch-label:after {
    opacity: 1;
  }
  
  .switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  }
  
  .switch-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
  }
  
  .switch-input:checked~.switch-handle {
    left: 74px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  }
  
  
  /* Switch Flat
  ==========================*/
  
  .switch-flat {
    padding: 0;
    background: #FFF;
    background-image: none;
  }
  
  .switch-flat .switch-label {
    background: #FFF;
    border: solid 2px #eceeef;
    box-shadow: none;
  }
  
  .switch-flat .switch-label:after {
    color: #0088cc;
  }
  
  .switch-flat .switch-handle {
    top: 6px;
    left: 6px;
    background: #dadada;
    width: 22px;
    height: 22px;
    box-shadow: none;
  }
  
  .switch-flat .switch-handle:before {
    background: #eceeef;
  }
  
  .switch-flat .switch-input:checked~.switch-label {
    background: #FFF;
    border-color: #0088cc;
  }
  
  .switch-flat .switch-input:checked~.switch-handle {
    left: 72px;
    background: #0088cc;
    box-shadow: none;
  }
  
  
  /* Transition
  ============================================================ */
  
  .switch-label,
  .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt; My Toggle Demo&lt;/title&gt;
    &lt;!--link href="css/css.css" rel="stylesheet" type="text/css"--&gt;
    &lt;link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h2&gt;Toggle Button Example&lt;/h2&gt;
    &lt;label class="switch switch-flat"&gt;
   &lt;input  class="switch-input" type="checkbox" id="myCheck" onclick="myFunction()" /&gt;
   &lt;span class="switch-label" data-on="Power On" data-off="Power Off"&gt;&lt;/span&gt; 
      &lt;span class="switch-handle"&gt;&lt;/span&gt; 
    &lt;/label&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>