Phonegap アプリケーション (jQuery Mobile) の単純なログイン画面に取り組んでいます。
すべてが正常に機能し、ユーザーはチェックボックスをクリックしてログインデータを保存することもできます (私は localStorage を使用します)。ユーザーがログアウトボタンをクリックしたときに、チェックボックスをオフにしてログイン画面にユーザーをリダイレクトしたいと考えています。リダイレクトは正常に機能し、パスワードは削除されます。唯一の問題は、チェックボックスをオフにするように指示しているにもかかわらず、チェックボックスがオンのままになっていることです。
これが私のコードです：
html
...
<form id="login">
<input type="text" placeholder="Username" id="usr" /><br />
<input type="password" placeholder="Password" id="pwd" /><br />
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Stay logged in</label>
<a data-role="button" data-transition="none" id="logindata" onclick="LogIn()">Login</a>
</form>
...
JavaScript
//checking if there is already a saved password. if yes, setting values
function checkStorage() {
if ( localStorage["pw"] != null){
document.getElementById("usr").value = localStorage["name"];
document.getElementById("pwd").value = localStorage["pw"];
$("#checkbox-1").prop("checked", true);
}
}
function LogIn() {
var usr = document.getElementById('usr').value;
var pwd = document.getElementById('pwd').value;
//always saving the name
localStorage["name"] = usr;
//if checkbox checked, save the password. if not, delete saved password
if ( $("#checkbox-1").is(":checked") ) {
localStorage["pw"] = pwd;
} else {
if (localStorage["pw"] != null){
localStorage.removeItem("pw");
}
}
$.ajax({
url: 'https://myurl',
async: false,
username: usr,
password: pwd,
success: function () {
$.mobile.changePage("#success");
},
error: function(){
alert("Please enter correct username and password!");
}
});
}
function LogOut() {
var usr = "";
var pwd = "";
$.mobile.changePage("#index");
document.getElementById("usr").value = localStorage["name"];
document.getElementById("pwd").value = "";
localStorage.removeItem("pw");
//This code is not working?
$("#checkbox-1").prop("checked", false);
}
このコードが機能するようになったら、パスワードをエンコードしたいと思いますが、今のところは機能させたいだけです。;)
私を助けてくれる人がいるといいのですが。
編集：
何が起こっているのか、ようやくわかりました。このログイン フォームに jQuery Mobile を使用しているため、チェックボックスを更新する必要があります。したがって、次のコードは今私のために機能します：
$("#checkbox-1").removeProp("checked").checkboxradio("refresh");