-1
I have a switch button, and I want to do a post every time it changes from true to fake. But I need to keep the guy from clicking over and over again. And just make the change from true to false after completing the previous post.
For those who want to see my function today is like this:
http://codepen.io/anon/pen/jrbZOg
$(function() {
$('.switch').on('change', function() {
$(this).toggleClass('checked');
});
});
body {
background-color: #fafafa;
margin: 60px;
}
.switch {
background-color: #bebebe;
border-radius: 4px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
color: #fff;
cursor: pointer;
display: block;
font-size: 14px;
height: 26px;
margin-bottom: 12px;
position: relative;
width: 60px;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.switch.checked {
background-color: #76d21d;
}
.switch input[type="checkbox"] {
cursor: pointer;
height: 10px;
left: 12px;
position: absolute;
top: 8px;
-webkit-transition: left 0.05s ease-in-out;
-moz-transition: left 0.05s ease-in-out;
-o-transition: left 0.05s ease-in-out;
-ms-transition: left 0.05s ease-in-out;
transition: left 0.05s ease-in-out;
width: 10px;
}
.switch.checked input[type="checkbox"] {
left: 38px;
}
.switch input:before {
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0));
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #fff;
border-radius: 2px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
content: '';
height: 18px;
position: absolute;
top: -5px;
left: -9px;
width: 26px;
}
.switch input:after {
background: #f0f0f0;
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff));
background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
border-radius: 10px;
content: '';
height: 12px;
margin: -1px 0 0 -1px;
position: absolute;
width: 12px;
}
.switch .icon-ok,
.switch .icon-remove {
line-height: 28px;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
margin: 0 9px;
}
.switch .icon-ok {
float: left;
}
.switch .icon-remove {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch checked">
<i class="icon-ok"></i>
<i class="icon-remove"></i>
<input type="checkbox" checked>
</label>
<label class="switch">
<i class="icon-ok"></i>
<i class="icon-remove"></i>
<input type="checkbox">
</label>
Why not give a "disabled" button when it changes state?
– Fleuquer Lima
You can put a flag to see if it clicked or not
– Miguel
o Post ai you speak is an ajax request, this?
– adelmo00
@Fleuquerlima after the post happens, you have to give a "enabled" button in case it wants to change to false for example.
– Edmo
@adelmo00 that even he does via ajax
– Edmo
I solved the problem with disabled. But who has any solution with mocking for example, and want to share, please feel free.
– Edmo
You can place a loading on the screen and hide the button on/off. Here’s an example: http://answall.com/questions/75743/loading-no-ajax
– adelmo00