I want to toggle a google material design lite (MDL) checkbox based on ajax post results, but it seems not working.
Then I did some testing: I found that either normal checkbox or out of ajax would work. And the actual value of failure checkbox is changed, but UI keeps unchanged.
Codes here： `
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1NxWSAi">
<script src="http://ift.tt/1TlJTcp"></script>
<script src="http://ift.tt/1V0HKB6"></script>
</head>
A1<input type="checkbox" id="A1" value="A1"><br>
A2<input type="checkbox" id="A2" value="A2">
<hr>
B1
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B1">
<input type="checkbox" id="B1" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>
B2
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B2">
<input type="checkbox" id="B2" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>
<script>
console.log('initial');
console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked')
+ $('#B1').is(':checked') + $('#B2').is(':checked'));
// now toggle the 4 checkbox; A2 and B2 under post funciton
$("#A1").prop("checked", true);
$("#B1").prop("checked", true);
$.post("#", function (data) {
console.log("...");
$("#A2").prop("checked", true);
$("#B2").prop("checked", true);
console.log('after toggle');
console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked')
+ $('#B1').is(':checked') + $('#B2').is(':checked'));
});
</script>
`
or codepen online. Check box A1,A2,B1 working. B2 not working but its value is true (refer to browser console).
Did I forget something or is it a bug? Any comment is appreciated.
Aucun commentaire:
Enregistrer un commentaire