This code is Written in MVC 5, In the View, I am selecting a value from a Drop Down List and updating the Checkbox based on the value 0 or 1 from the Database using Jquery. When i select any value from the Drop down It dynamically calls the following ajax script code.
<script type="text/javascript">
$(function () {
$(document).ready(function () {
});
$("#ddlUsername").change(function () {
if ($(this).val() != "") {
console.log($("#ddlUsername option:selected").text())
console.log($("#ddlUsername option:selected").val())
$.ajax({
type: "POST",
url: "/Home/RetrieveSettings",
data: {
upen: $("#ddlUsername option:selected").val()
},
success: function (data) {
console.log(data)
console.log($("#checkbox1").is(":checked"))
@*Data[0] is data array from database, and cb_field is column name in the Database*@
if (data[0].cb_field== 1) {
$("#checkbox1").attr("checked", true);
$("#checkbox1").val($("#checkbox1").is(":checked"));
} else {
$("#checkbox1").attr("checked", false);
$("#checkbox1").val($("#checkbox1").is(":checked"));
}
console.log($("#checkbox1"));
}
})
} else {
$("#list_user_name").text("");
}
});
$("#checkbox1").change(function () {
//console.log($("#touch_history").val())
//console.log($("#checkbox1").val())
console.log($("#checkbox1").is(":checked"))
})
});
</script>
This works fine if we do not click the checkbox. Once any checkbox is clicked that checkbox will not be updated dynamically using following function. I am using A Switch Functionality for this checkbox and the checkbox is shown in CSS and HTML Code below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Toggle Switch Button</title>
<style>
.switch {
position: relative;
display: block;
vertical-align: top;
width: 200px;
height: 40px;
padding: 3px;
margin: 0 10px 10px 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;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 13px;
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);
}
.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;
}
.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: 38px;
height: 38px;
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: 165px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* 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;
}
</style>
</head>
<body>
<label class="switch">
<input class="switch-input" type="checkbox" id="checkbox1" />
<span class="switch-label" data-on="ON" data-off="OFF"></span> <span class="switch-handle"></span> </label>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire