Proto.io Toggle Switch/checkbox toggle

Question

토글 스위치를 작동 시키려고 할 때 데이터가 제거되거나 입력에 적용되지 않는 경우에도 토글을 거부합니다 (데이터 필드 속성은 데이터를 비녀장). 아무도 내가 볼 수 없습니까? 모든 전환은 proto.io CSS를 사용하여 수행됩니다.

  <h2 id="workflow-header" class="work-header"></h2> 
    <div class="onoffswitch" id="workflow"> 
     <input type="checkbox" class="onoffswitch-checkbox" id="email-switch-thing" data-field="subscribeToWorkflowEmail" {{#if checked}}checked{{/if}}> 
     <label class="onoffswitch-label" for="email-switch-thing"> 
      <div class="onoffswitch-inner" id="activeworkflow-toggle"></div> 
      <div class="onoffswitch-switch"></div> 
     </label> 

    </div> 

을 여기에 CSS의 : 여기에 대한 HTML의

.onoffswitch { 
    position: relative; width: 90px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    border: 2px solid #666666; border-radius: 30px; 
} 

.onoffswitch-inner { 
    display: block; width: 200%; margin-left: -100%; 
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    border-radius: 30px; 
    box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset; 
} 

.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 15px; 
    background-color: #6BB2ED; color: #FFFFFF; 
    border-radius: 30px 0 0 30px; 
} 

.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 15px; 
    background-color: #FFFFFF; color: #666666; 
    text-align: right; 
    border-radius: 0 30px 30px 0; 
} 

.onoffswitch-switch { 
    display: block; width: 30px; margin: 0px; 
    background: #FFFFFF; 
    border: 2px solid #666666; border-radius: 30px; 
    position: absolute; top: 0; bottom: 0; right: 56px; 
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; 
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    box-shadow: 0 1px 1px white inset; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

어떤 도움을 주시면 감사하겠습니다!

Answer 1

나는 왜 그것이 당신을 위해 일하지 않는지 모르지만 그것은 나를 위해 일하고 있습니다. Here 문제를 해결하기 위해 사용하고있는 JSFiddle을 연결했습니다.

HTML :

CSS

 <h2 id="workflow-header" class="work-header"></h2> 
<div class="onoffswitch" id="workflow"> 
    <input type="checkbox" class="onoffswitch-checkbox" id="email-switch-thing" data-field="subscribeToWorkflowEmail" {{#if checked}}checked{{/if}}> 
    <label class="onoffswitch-label" for="email-switch-thing"> 
     <div class="onoffswitch-inner" id="activeworkflow-toggle"></div> 
     <div class="onoffswitch-switch"></div> 
    </label> 

</div> 

:

.onoffswitch { 
    position: relative; width: 90px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    border: 2px solid #666666; border-radius: 30px; 
} 

.onoffswitch-inner { 
    display: block; width: 200%; margin-left: -100%; 
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    border-radius: 30px; 
    box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset; 
} 

.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 15px; 
    background-color: #6BB2ED; color: #FFFFFF; 
    border-radius: 30px 0 0 30px; 
} 

.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 15px; 
    background-color: #FFFFFF; color: #666666; 
    text-align: right; 
    border-radius: 0 30px 30px 0; 
} 

.onoffswitch-switch { 
    display: block; width: 30px; margin: 0px; 
    background: #FFFFFF; 
    border: 2px solid #666666; border-radius: 30px; 
    position: absolute; top: 0; bottom: 0; right: 56px; 
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; 
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    box-shadow: 0 1px 1px white inset; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

연구가, 내가 찾을 수있는 유일한 해결책은 당신이 IE8을 사용하는 경우 당신이 필요로가, 호환성 문제가 될 수 있다는 것이다 그것을 지원하십시오 소스 here. 나는 일화를 듣는 것을 주저하지만 CSS 버튼을 사용하는 것과 비슷한 문제가 발생했을 때 간단한 호환성/지원 문제로 판명났다.