При отправке формы хочу визуально сделать кастомный checkbox "заблокированным", т.е. пока отправляется форма, сделать синюю птичку чекбокса серой. Неужели такое нельзя реализовать?
html:
<form id="loginform" method="post">
<p>
<label>
Имя пользователя или e-mail
<br>
<input type="text" id="login">
</label>
</p>
<p>
<label>
Пароль
<br>
<input type="password" id="pass">
</label>
</p>
<p class="forgetmenot">
<label>
<input type="checkbox" id="rememberme">
Запомнить меня
</label>
</p>
<p class="submit">
<label>
<input type="submit" id="submit" value="Войти" class="button">
</label>
</p>
</form>
css:
#loginform input[type=checkbox]
{
width: 16px;
min-width: 16px;
background: #fbfbfb;
border: 1px solid #b4b9be;
color: #555;
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 16px;
margin: -4px 4px 0 0;
outline: 0;
padding: 0!important;
text-align: center;
vertical-align: middle;
-webkit-appearance: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
transition: .05s border-color ease-in-out;
}
#loginform input[type=checkbox]:checked
{
background-image: url(https://png.icons8.com/metro/16/008BC3/checkmark.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
JS:
$(document).ready(function()
{
$("#submit").click(function()
{
$('#rememberme:checked').css({'background-image':'url(https://png.icons8.com/metro/16/cccccc/checkmark.png)'});
$.ajax(
{
type: "POST",
url: index.php,
dataType: 'json',
data: {"login": login, "pass": pass, "rememberme": rememberme},
cache: false,
success: function(data) // Обработчик ответа от сервера
{
$('#rememberme:checked').css({'background-image':'url(https://png.icons8.com/metro/16/008BC3/checkmark.png)'});
},
error: function(jqXHR, textStatus, errorThrown) // Обработчик ошибок соединения с сервером
{
console.log(jqXHR.status+" / "+textStatus+" / "+ errorThrown);
$('#login-error').fadeIn();
$('#login-error').html('<strong>ОШИБКА:</strong> Ошибка соединения с сервером. Повторите попытку позже.');
}
});
});
});
Т.е. по сути хочу изменить картинку чекбокса на такую же, но серого цвета. Однако при замене свойства css через JS чекбокса я получаю фон в виде этой галки, который уже нельзя отключить или включить как чекбокс. Бьюсь над задачей уже пару часов, как решить ее не знаю. Прошу помочь.